Estoy creando un componente que contiene una entrada que dirige al usuario a una nueva pestaña al presionar Intro o al hacer clic en el botón de búsqueda. El botón de búsqueda funciona correctamente, sin embargo, tengo problemas para obtener la entrada para llamar al método handleSubmit al presionar la tecla Intro. A partir de ahora, presionar la tecla enter no hace nada. ¿Cómo puedo conseguir esto? código:
const LinkCard = (props) => { const [searchInput, setSearchInput] = useState(""); const handleChange = (e) => { setSearchInput(e.target.value); }; const handleClick = (e) => { e.preventDefault(); location.assign("http://www.mozilla.org"); }; const handleSubmit = (e) => { e.preventDefault(); location.assign("http://www.mozilla.org"); }; return ( <Flex borderWidth="1px" borderRadius="lg" alignItems="center"> {props.icon} <Box>{props.websiteName}</Box> <InputGroup> <Input placeholder={"Search " + props.websiteName} onChange={handleChange} onSubmit={handleSubmit} flexGrow="1" m="2%" /> <Link href={props.url} passHref={true}> <a> <InputRightElement m="2%"> <Button onClick={handleClick}> <FaSearch /> </Button> </InputRightElement> </a> </Link> </InputGroup> </Flex> ); };const [value, setValue] = React.useState(''); return ( <form onSubmit={e=> { e.preventDefault(); location.assign('?wd=' + value) }}> <input value={value} onChange={(e)=> setValue(e.currentTarget.value)} /> <button type="submit">Search</button> </form> )o
const [value, setValue] = React.useState(''); return ( <> <input value={value} onChange={(e)=> setValue(e.currentTarget.value)} onKeyPress={e=> { if (e.key === 'Enter') { location.assign('?wd=' + value) } }} /> <button onClick={()=> location.assign('?wd=' + value)}>Search</button> </> );Hay 2 formas posibles de lograrlo:
submitHandler : const handleSubmit = e => { e.preventDefault(); if (e.key === "Enter") { location.assign("http://www.mozilla.org"); } };form alrededor de su entrada y agregar enviar un evento: <form onSubmit={handleSubmit}> <Input placeholder={"Search " + props.websiteName} onChange={handleChange} onSubmit={handleSubmit} flexGrow="1" m="2%" /> </form>;