0
227
VistasAutocompletar usando Antd en Reactjs
Estoy creando opciones de autocompletado en la aplicación de reacción y generé el campo de autocompletado con una lista de opciones.
Ejemplo de trabajo:
Lista de opciones:
const options = [ { label: "hello", value: "1" }, { label: "codesandbox", value: "2" }, { label: "react", value: "3" }, { label: "nodejs", value: "4" }, { label: "java", value: "5" }, { label: "antd", value: "6" }, { label: "dependency", value: "7" }, { label: "less", value: "8" } ]; Aquí, si el usuario selecciona la react de los datos, entonces la entrada tiene el valor de 3 .
Expectativa:
La expectativa es que el campo de entrada debe tener el texto como react , pero el valor seleccionado debe ser 3 .
Entonces, para la visualización del usuario, debe estar en texto y el valor de fondo será un número.
Referido a esta publicación El autocompletado de React Antd v4 muestra el valor seleccionado en lugar de la etiqueta al seleccionar una opción , pero no ayuda de ninguna manera.
2 Respuestas
Responde la pregunta0
Bueno, AutoComplete es un componente de input . Lo que necesitas es select con search . El ejemplo que proporcionaste se puede implementar un poco para que funcione como quieras. Es posible que deba hacer algunas modificaciones. El siguiente código es solo para demostrar cómo puede cambiarlo, no estoy seguro de si se ejecutará sin errores o no.
import { Select } from 'antd'; const { Option } = Select; function onChange(value) { console.log(`selected ${value}`); } const options = [ { label: "hello", value: "1" }, { label: "codesandbox", value: "2" }, { label: "react", value: "3" }, { label: "nodejs", value: "4" }, { label: "java", value: "5" }, { label: "antd", value: "6" }, { label: "dependency", value: "7" }, { label: "less", value: "8" } ]; function onSearch(val) { console.log('search:', val); } ReactDOM.render( <Select showSearch placeholder="Select a person" optionFilterProp="children" onChange={onChange} onSearch={onSearch} filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 } > { options.map((option => <Option value={option.value}>{option.hellop}</Option>)) } </Select>, mountNode, );0
Como respondió @TheWhiteFang, una solución para resolver su problema es usar el componente Select con showSearch prop, pero si desea usar AutoComplete entre sí, otra solución podría ser definir dos estados separados, un estado para el valor de entrada y otro estado para la opción seleccionada de AutoComplete . Luego, podría administrar sus estados mediante onChange y onSelect props. como esto:
const Complete = () => { const [selectedOption, setSelectedOption] = React.useState(''); const [inputValue, setInputValue] = React.useState(''); const onSelect = (data, option) => { setSelectedOption(option); setInputValue(option.label); }; const onChange = (data, option) => { setInputValue(data); setSelectedOption(option); // to remove selected option when user types something wich doesn't match with any option }; return ( <AutoComplete value={inputValue} options={options} autoFocus={true} style={{width: 200}} filterOption={(inputValue, option) => option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 } onSelect={onSelect} onChange={onChange} /> ); };Tal vez necesite hacer algunos cambios en el ejemplo anterior según sus requisitos, de todos modos puede encontrar el ejemplo anterior aquí en stackblitz .