Tengo una barra de búsqueda simple y quiero rellenarla previamente con algunos datos. Intenté usar value pero no permite que el usuario cambie el valor en la barra de búsqueda después.
<input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks}></input>Me gustaría que la barra de búsqueda ya tenga un valor y permita que el usuario pueda cambiarlo. ¿Necesito algo de JS para ello o se puede hacer solo con HTML?
Te falta la manija del cambio. Entonces, debe editar el valor cuando el usuario cambia algo en la entrada, sería como:
En este caso, usaría React Hooks (useState) para poder establecer un valor predeterminado y poder cambiarlo.
Y finalmente, use ese seCompareLinks cuando el usuario onChange en la entrada.
Puede verlo funcionando aquí: https://codesandbox.io/s/practical-dewdney-wj7j2?file=/src/App.js:0-543
import React from 'react'; import "./styles.css"; export default function App() { const [comparelinks, setComparelinks] = React.useState('default value'); const handleChange = (e) => { setComparelinks(e.target.value); } return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks} onChange={handleChange}></input> </div> ); }También debe manejar la actualización de la entrada, considerando que usa ganchos:
const [comparelinks, setCompareLinks] = useState() const handleChange = (event) => { setCompareLinks(event.target.value) } <input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks} onChange={handleChange}></input>