Soy bastante nuevo en React y JavaScript, estoy tratando de obtener el valor de una opción desplegable de selección de reacción para usar en un filtro. El siguiente código arroja "TypeError no detectado: event.target no está definido".
const [filter, setFilters] = useState({}) const handleFilters = (event)=> { const value = event.target.value; setFilters({ [event.target.name]: value, }); }; console.log(filter);Reaccionar-Seleccionar
<Select name="category" onChange={ handleFilters } options={filterOptions} className='dropdown'/>Opciones de reacción-selección
const filterOptions = [ { value: 'value1', label: 'label1' }, { value: 'value2', label: 'label2' }, { value: 'value3', label: 'label3' }, { value: 'value4', label: 'label4' } ];el registro de consola que espero al elegir la primera opción desplegable sería: {categoría, valor1}
Tenga en cuenta que onChange de react-select no se llama con el evento onChange de selección nativa sino con la siguiente API :
const onChange = (option: Option | null, actionMeta: ActionMeta<Option>) => { ... }Entonces su función de controlador debería verse así
const handleFilters = (option) => { setFilters({ [event.target.name]: option, }); };Puede realizar el siguiente cambio en el evento onChange
<Select name="category" onChange={(e)=> handleFilters(e) } options={filterOptions} className='dropdown'/>Esto sucede porque el controlador onChange de react-select devuelve directamente la opción (Objeto) que está seleccionada.
Entonces, por ejemplo, el evento contendrá {label:"label1",value:"value1"}
Puede echar un vistazo a este codesandbox como referencia