0
124
VistasCampo de entrada de datos que muestra los valores ingresados
Mi aplicación tiene una ventana modal con filtros. Me gustaría agregarle otro tipo de filtro. Simplemente no sé cómo implementarlo en React (tal vez puedas ayudarme con el código, recomendar enlaces).
El significado es el siguiente: quiero que los filtros tengan una línea en la que el usuario pueda escribir algún valor por su cuenta, presione Entrar, vea el resultado ingresado (es posible ingresar varios valores por los cuales puede filtrar).
Quizás mi explicación sea caótica, además proporcionaré una captura de pantalla con el resultado deseado:
2 Respuestas
Responde la pregunta0
export function ListItem({ itemValue }) { return ( <div className="item"> <span className="itemValue">{itemValue}</span> </div> ); } export default function App() { const [itemList, setListItem] = useState([]); const [item, setItem] = useState(""); const addValue = (event) => { setItem(event.target.value); }; const listenEnter = (event) => { if (event.key === "Enter" && event.target.value !== "") { setListItem([...itemList, item]); setItem(""); } }; return ( <div className="App"> <input className="inputElement" placeholder="Enter Value" value={item} onChange={addValue} onKeyUp={listenEnter} /> <div className="itemList"> {itemList.map((item) => ( <ListItem itemValue={item} /> ))} </div> </div> ); }código completo https://codesandbox.io/s/elastic-meadow-h5kbxs
0
Para la interfaz de usuario, puede usar o crear un campo de entrada personalizado como este https://evergreen.segment.com/components/tag-input .
Para la implementación: ahora tiene campos buscados por el usuario Ex-
const list = [2,3,4,56,7,8,12,34,0,1] const searchedItems = [3,7,8] const finalList= []; function searchItems() { list.forEach(item => { searchedItems.forEach(ele => { if(ele===item) finalList.push(item); }) }); return finalList; } console.log(searchItems())Finalmente, use esta matriz en los resultados de su elemento de búsqueda.