0
311
Visualizações¿Cómo hacer una búsqueda en el cuadro de selección usando React JS?
Estoy haciendo un cuadro de selección con la ayuda del diseño de Antd .
Escenario actual :
-> Estoy haciendo dos cuadros de selección aquí, en los que una selección tiene datos estáticos y otra de api.
Problema :
-> Mientras escribo la palabra clave para seleccionar opciones, la estática funciona pero las opciones dinámicas (datos de API) no funcionan y muestran el texto Sin datos.
Expectativa :
Tanto el cuadro de selección estático como el dinámico deben mostrar las opciones según la palabra clave de búsqueda en el cuadro de selección.
Código: (Opciones como estáticas)
<Select mode="multiple" style={{ width: 120 }}> <Select.Option value="jack">Jack</Select.Option> <Select.Option value="lucy">Lucy</Select.Option> <Select.Option value="disabled" disabled> Disabled </Select.Option> <Select.Option value="Yiminghe">yiminghe</Select.Option> </Select> 
Código: (Opciones de api)
<Select mode="multiple" style={{ width: 120 }}> {data.map(({ label, value, text }) => label ? ( <Select.Option value={value || ""} key={label}> {text} </Select.Option> ) : null )} </Select> 
Ejemplo de trabajo:
2 Respostas
Responde à pergunta0
Funciona cuando el valor es el mismo que el texto de la opción. Probablemente la peculiaridad de antd
<Select mode="multiple" style={{ width: 120 }}> {data.map(({ label, value, text }) => label ? ( <Select.Option value={label} key={label}> {text} </Select.Option> ) : null )} </Select>0
Ha mezclado los valores de etiqueta y valor. La label es el valor del nombre que está escribiendo y tratando de hacer coincidir.
useEffect(() => { fetch("https://api.github.com/users") .then((res) => res.json()) .then((data) => { const userData = data.map((item) => ({ label: item.login, // <-- input values you are matching value: item.id })); setData(userData); }); }, []); ... <Select mode="multiple" style={{ width: 120 }}> {data.map(({ label, value, text }) => ( <Select.Option value={label} key={value}> // <-- label is option value {label} </Select.Option> ))} </Select>