Estoy usando React para crear un formulario y estoy tratando de filtrar una list con SearchInput (que funciona igual que TextInput) ubicado en el componente secundario Header . Pero cada vez que escribo un carácter, SearchInput se desenfoca
function index() { const list = [//data\\] const [search, setSearch] = useState(""); const [filteredResults, setFilteredResults] = useState([]); const searchItems = (searchValue) => { setSearch(searchValue); if (search !== "") { const filteredData = partners.filter((item) => { return Object.values(item) .join("") .toLowerCase() .includes(search.toLowerCase()); }); setFilteredResults(filteredData); } else { setFilteredResults(partners); } }; const Header = () => ( <Box> <SearchInput placeholder="Search" value={search} onChange={(e) => searchItems(e.target.value)} /> </Box> ); return ( <Parent headerContent={<Header />} > <Box> <Table data={search.length > 1 ? filteredResults : list} /> </Box> </Parent> ); } export default index;Oh, creo que puedo ver el problema ahora: es la forma en que está representando el componente <SearchInput /> . Sin darse cuenta, está creando un nuevo componente funcional en cada renderizado. Alinee el Header directamente en la propiedad Parent del control headerContent o cree un componente completamente separado:
const Header = ({ search, onSearchChange }) => { const handleChange = (e) => onSearchChange(e.target.value); return ( <Box> <SearchInput placeholder="Search" value={search} onChange={handleChange} /> </Box> ); } function index() { // ----- 8< ----- return ( <Parent headerContent={<Header search={search} onSearchChange={searchItems} />} > {/* ... */} </Parent> ); } Mientras está allí, tiene un error sutil con su comparación: parece que está buscando a sus partners de manera efectiva como una lista de cadenas; pero, ya que te unes a ellos, si tuvieras socios con los nombres:
'one' 'two'Está creando una cadena de búsqueda como 'onetwo', por lo que la búsqueda de 'et' coincidiría, aunque en realidad no tenga un socio que coincida con eso. Puede arreglar eso simplemente revisando a cada socio individualmente... algo como:
const searchItems = (searchValue) => { setSearch(searchValue); if (search !== "") { const searchValueLower = searchValue.toLowerCase(); const filteredData = partners.filter((item) => { return Object.values(item) .some(item => item.toLowerCase().includes(searchValueLower); }); setFilteredResults(filteredData); } else { setFilteredResults(partners); } };