Intentando hacer que el evento onChange del siguiente componente se active, pero no lo hace. Cuando escribo en el cuadro de búsqueda, no se imprime nada en la consola. No se dispara ningún cambio
const Search = () => { let history = useHistory() const [search, setSearch] = useState('') const handleSubmit = (e) => { e.preventDefault() if (search) { console.log("typing..") history.push(`/?search=${search}`) } else { history.push(history.push(history.location.pathname)) } } return ( <Form.Group controlId='searchbox' onSubmit={handleSubmit}> <Form.Control className="auth-input" type='text' placeholder="Search..." onChange={(e) => setSearch(e.target.value)} > </Form.Control> <Button type='submit'>Submit</Button> </Form.Group> ) } export default Search const Home =()=>{ return (<div><Search /><div>) }export default Home Todavía no puedo identificar dónde está el error. ¿Cómo hago para que funcione?
Supongo que Form.Control es un control personalizado o un control de terceros, por lo tanto, no puede convertirlo en una entrada controlada. Puede intentar crear una referencia y obtener el valor de la referencia en el controlador de eventos onChange. Si el control personalizado no es un control de terceros, puede agregar el controlador onChange dentro del componente Form.Control y pasar una referencia de función al control.
Editar:
Aquí está su solución:https://codesandbox.io/s/vigorous-mclean-4jusl?file=/src/App.js
En caso de que vea un error en la zona de pruebas, actualice la página. Parece que hay algún error con codesandbox.
Explicación :
Cree una referencia para acceder a la entrada usando useRef:
const controlref = useRef();Pasar la referencia al control:
<Form.Control onChange={handleChange} **ref={controlref}** type="text" placeholder="search..." />Obtenga el valor en onChange usando la referencia:
const handleChange = (e) => { console.log(controlref.current.value); setSearch(controlref.current.value); };En primer lugar, la "entrada" html es un elemento de cierre automático.
En segundo lugar, se ha perdido el "valor" dentro del componente de entrada.
Tu codigo:
<Form.Control className="auth-input" type='text' placeholder="Search..." onChange={(e) => setSearch(e.target.value)} ></Form.Control>Solución:
<Form.Control className="auth-input" type='text' placeholder="Search..." onChange={(e) => setSearch(e.target.value)} value={search} />Intente usar event onInput en su lugar:
<Form.Control className="auth-input" type='text' placeholder="Search..." onInput={(e) => setSearch(e.target.value)} />