Ahora estoy trabajando en una pequeña tarea con una etiqueta de selección como esta
<select name="selectmedgroup" id="selectmedgroup" value={selectedGroupValue} onChange={filterOnSelectChange} > <option value="" defaultValue hidden> -Select Group- </option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select>Quiero obtener el valor del cambio. Aquí está mi función de cambio y estado
const [selectedGroupValue, setSelectedGroupValue] = useState(); const filterOnSelectChange = (e) => { setSelectedGroupValue(e.target.value); console.log(selectedGroupValue); };Todo parece funcionar bien, pero cuando cierro la sesión de la opción seleccionada primero, si elijo A por primera vez , no estoy definido en los registros. Si elijo BI, obtengo A desconectado . Si elijo CI, B se desconecta.
No creo que sea mi pedido lo que está mal. Recuerde que no quiero tener un valor inicial en el estado porque esta será solo una selección que usaré para filtrar lo que el usuario ve en la página. Entonces, por primera vez en el montaje del componente, no se debe filtrar nada.
Tengo la sensación de que el problema es la primera etiqueta de opción con -Select Group- . ¿Hay alguna forma en que pueda evitar usar esa primera etiqueta de opciones porque es como un marcador de posición cuyo valor no necesito seleccionar?
¿Cómo puedo obtener los valores correctos? Por favor ayuda
Intente consolar su valor de grupo seleccionado en useEffect hook, resuélvalo así
import React, { useState } from 'react'; const App = () => { const [selectedGroupValue, setSelectedGroupValue] = useState(); const filterOnSelectChange = (e) => { setSelectedGroupValue(e.target.value); }; React.useEffect(() => { console.log(selectedGroupValue); }, [selectedGroupValue]); return ( <> <select name="selectmedgroup" id="selectmedgroup" value={selectedGroupValue} onChange={filterOnSelectChange} > <option value="" defaultValue hidden> -Select Group- </option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> </select> </> ); }; export default App;