Estoy buscando cómo activar la función onChange cuando una opción ya está seleccionada y el usuario hace clic para anular la selección, es como una selección múltiple. puede seleccionar una opción y deseleccionarla haciendo clic en ella por segunda vez. esto es lo que ya he probado. todo funciona cuando hay más de 1 opción seleccionada, pero no cuando solo hay una opción seleccionada.
const handleChangeGroup = (selectedItems) => { const groups = []; for (let i = 0; i < selectedItems.length; i++) { if (groupArray.includes(selectedItems[i].value)) { if (groupArray.length === 0) { setGroupArray([]); } else { var newArray = groupArray.filter( (value) => value != selectedItems[i].value ); setGroupArray(newArray); } } else { groups.push(selectedItems[i].value); setGroupArray(groupArray.concat(groups)); } } }; <select multiple={true} value={groupArray} onChange={(event) => handleChangeGroup(event.target.selectedOptions) }> {data[selectType] !== undefined ? Object.keys(data[selectType]).map((group, index) => ( <option value={group} key={group}> {group} </option> )) : null} </select>Ejemplo ejecutable:
const Sample = () => { const data = ['a', 'b', 'c']; const [groupArray, setGroupArray] = React.useState([]); const handleChangeGroup = (selectedItem) => { if (groupArray.includes(selectedItem)) { const tempArray = groupArray.filter(item => item !== selectedItem); setGroupArray([...tempArray]); } else { setGroupArray([...groupArray, selectedItem]); } }; return ( <select multiple value={groupArray} onClick={e => handleChangeGroup(e.target.value)} > {data.map((group, index) => ( <option value={group} key={group}> {group} </option> ))} </select> ); }; ReactDOM.render(<Sample />, document.querySelector("#app")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="app"></div>Es posible que desee considerar el uso de casillas de verificación para una interfaz de usuario más intuitiva y un código más conciso.
Si no desea usar casillas de verificación, puede usar este código:
const handleChangeGroup = (selectedItem) => { if (groupArray.includes(selectedItem)) { const tempArray = groupArray.filter(item => item !== selectedItem); setGroupArray([...tempArray]); } else { setGroupArray([...groupArray, selectedItem]); } }; return ( <select multiple value={groupArray} onClick={e => handleChangeGroup(e.target.value)} > {data[selectType] !== undefined ? Object.keys(data[selectType]).map((group, index) => ( <option value={group} key={group}> {group} </option> )) : null} </select> ); La razón por la que onChange no funcionará es porque el comportamiento predeterminado de select es hacer que el usuario elija al menos una opción. Hacer clic en la última opción seleccionada no deseleccionará nada. Por lo tanto, onChange no se activará cuando solo le quede un elemento seleccionado. Puede anular esto reemplazando onChange con onClick .
Para un ejemplo/prueba más simple, puede intentar usar select sin el atributo multiple . Al hacer clic en la opción seleccionada actualmente, tampoco se activará ningún evento de deselección.