Estoy intentando algo bastante simple, supongo, pero parece que no puedo hacerlo funcionar correctamente. Así que estoy usando un campo de entrada para filtrar una serie de objetos, lo que funciona medianamente bien en este momento (eso significa que no estoy seguro de si la condición está configurada correctamente; a veces muestra los resultados correctos, a veces no).
de todos modos, me gustaría cambiar el color de fondo dependiendo de si hay objetos que coincidan con la entrada o no.
Por favor, ¿alguien puede ayudarme a solucionar esto? Este es mi código:
const [searchInput, setSearchInput] = useState(''); const [isValid, setIsValid] = useState(true) const style = (isValid ? 'searched' : ''); const searchItems = (searchValue) => { setSearchInput(searchValue) if (searchInput !== '') { const filteredData = allData.filter((project) => { return Object.values(project).join('').toLowerCase().includes(searchInput.toLowerCase()) }) setFilteredResults(filteredData) setIsValid(true) } else{ setFilteredResults(allData) setIsValid(false) } }y la entrada:
<label className="searchbar"> <input className={style} placeholder="A Visual Practice" onFocus={(e) => e.target.placeholder = "Search for?"} onBlur={(e) => e.target.placeholder = "A Visual Practice"} onChange={(e) => searchItems(e.target.value)} /> </label>Después de establecer el estado de entrada de búsqueda, el componente se volverá a representar. Entonces lo que yo haría es lo siguiente:
Use el estado de estilo para verificar si la entrada es válida o no y, en lugar de almacenar una cadena, almacene un valor booleano (verdadero para una entrada válida). Llamaría a este estado isValid y setIsValid.
Antes de la devolución del componente, cree una constante para su estilo
estilo const = ${isValid ? 'searched' : ''} ;
Debido a que el componente se volverá a representar cada vez que cambie un estado, la constante de estilo se cambiará en función del estado isValid. Esta constante se puede usar como una clase para su componente.