Estoy usando el componente React Boostrap Select:
<Form.Group className="mb-1"> <Form.Label htmlFor="type" className="iig-form-label d-inline-block text-truncate" > Type de projet {loadingTypes && <Spinner animation="grow" size="sm" />} </Form.Label> <Form.Select required aria-label="Default select example" id="type" name="type" onChange={(e) => handleChange(e)} isInvalid={false} > // THIS IS THE DEFAULT OPTION THAT IS NOT TRIGGERED <------------------- <option value={currentType ? currentType["@id"] : ""} data-category={ currentType ? currentType?.category?.label : "" } > {currentType ? currentType.label : `Choisir parmi la liste des types de projets`} </option> {filteredTypes.map((filteredTypes, key) => { return ( <option value={`/api/types/${filteredTypes.id}`} data-category={filteredTypes.category.label} key={key} > {filteredTypes.label} </option> ); })}Agregué una opción predeterminada para mostrar.
Cuando hago clic en la opción predeterminada, el evento onChange no se activa.
¿Cómo puedo arreglar eso?
No pude seguir tu ejemplo, así que creé un ejemplo mínimo para mostrarte cómo funciona:
.
const selectOptions = [ { value: "js", label: "Javascript" }, { value: "ja", label: "Java" }, { value: "py", label: "Python" }, { value: "go", label: "Go" }, { value: "cs", label: "C#" } ]; export default function App() { const [value, selectValue] = useState("js"); const handleChange = (event) => selectValue(event.target.value); return ( <Form.Group className="mb-1"> <Form.Select value={value} onChange={handleChange}> {selectOptions.map((option) => { return <option value={option.value}>{option.label}</option>; })} </Form.Select> </Form.Group> ); }