Quiero establecer un indicador booleano si el texto proof contiene una URL válida. Estoy usando Regex (http:// o https:// o www. son direcciones URL válidas)
const TabContent = ({ name, typeProof }) => { const [text, setText] = useState(""); const [proof, setProof] = useState(""); const [inputURL, setInputURL] = useState(""); const [valid, setValid] = useState("false"); const isValidURLRegex = "([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?"; // http:// or https:// or www. should work const validateURL = (value) => { if (!isValidURLRegex.test(value)) { setValid(false); } else { setValid(true); } }; function onChange(e) { setInputURL(e.target.value); validateURL(e.target.value); } return ( <> <SafeAreaView> <TextInput style={{ height: 50, margin: 12, borderWidth: 0.5, padding: 10, borderRadius: "10px" }} placeholder="Enter your proof here:" multiline={true} onChangeText={(value) => setProof(value)} value={proof} error={inputURL} onChange={() => setInputURL((error) => !error)} // or onChange={onChange} /> </SafeAreaView> </> ); }; export default function Tabs({ data }) { return ( <TabsComponent forceRenderTabPanel> ... </TabList> {data.map(({ name, typeProof }) => ( <TabPanel key={name}> <TabContent {...{ name, typeProof }} /> </TabPanel> ))} </TabsComponent> ); }Aquí está mi código
Le sugiero que use la URL para verificar si la URL es válida, en lugar de analizar RegExp:
const checkIsValidUrl = (url: string): boolean => { try { new URL(url); return true; } catch { return false; } };Y luego puedes usarlo en el componente React:
const isValidUrl = checkIsValidUrl(inputURL);También puede memorizarlo, pero es una optimización prematura, que no se sugiere.
const isValidUrl = useMemo(() => checkIsValidUrl(inputURL), [inputURL]);Si desea permitir solo los protocolos http y https, puede actualizar la utilidad de esta manera:
const checkIsValidUrl = (url: string): boolean => { try { const { protocol } = new URL(url); return protocol === 'https:' || protocol === 'http:'; } catch { return false; } };Si realmente desea mantener la bandera en estado, debe usar un efecto:
useEffect(() => { const isValidUrl = checkIsValidUrl(inputURL); setValid(isValidUrl); }, [inputURL]);