He escrito un componente de entrada reutilizable para url si una url no comienza con http , entonces se agregará http al principio.
Aquí tienes el componente
import React, {useContext, useCallback} from 'react'; const InputURL = ({ name, onChange, ...rest}) => { const sanitizeURLonChange = React.useCallback((value, actionMeta) => { if (value.target.value) { if (!value.target.value.startsWith('http')) { value.target.value = 'http://' + value.target.value } } }, [onChange]) return ( <> <input name={name} {...rest} onChange={sanitizeURLonChange} /> </> ); } export default InputURL; Pero cuando trato de usarlo en algún componente, onChange no funciona
lo intento de esta manera
<InputURL onChange={(e) => console.log(e.target.value)} /> desafortunadamente inputURL onChange ya no funciona, ¿pueden ayudarme en este caso?
quiero lograr si el usuario ingresa la URL sin http, agregará http,
Como lo stackoverflow.com/ y luego devolverá https://stackoverflow.com/ en Onchange
Creo que tu problema está aquí:
value.target.value = 'http://' + value.target.value Está intentando actualizar el value de entrada sin usar un gancho.
Intenta reescribir tu código de esta manera:
import React, { useState } from 'react'; const InputURL = ({ name, onChange, ...rest}) => { const [val, setVal] = useState(""); const sanitizeURLonChange = (value, actionMeta) => { if (value.target.value) { if (!value.target.value.startsWith('http')) { setVal('http://' + value.target.value); } else setVal(value.target.value); } } return ( <> <input name={name} {...rest} value={val} onChange={sanitizeURLonChange} /> </> ); } export default InputURL;Aquí codesandbox ejemplo de trabajo.
Está cerrando el corchete justo después del argumento del evento: {(e)} . Prueba así:
<inputURL onChange={(e, val) => console.log(val)} />también tienes que usar el onChange que estás pasando como accesorios:
const sanitizeURLonChange = (e, actionMeta) => { let newValue = e.target.value if (newValue) { if (!newValue.startsWith('http')) { newValue = "http://" + newValue } } setVal(newValue); onChange(event, newValue) } pero de todos modos parece que el onChange que está pasando como accesorios para inputURL no se usa en ninguna parte, por lo que no estoy seguro de lo que quiere lograr. También está llamando al componente inputURL en lugar de InputURL y la primera letra mayúscula es muy importante en JSX.