Я пытаюсь создать компонент с именем SelectMultiple.
import React, { useState } from "react";
const SelectMultiple = () => {
const [skills, setSkills] = useState([]);
const handleChange = event => {
const { value } = event.target;
const indexOfValue = skills.indexOf(value);
if (indexOfValue === -1) {
setSkills([...skills, value]);
} else {
setSkills(skills.filter(skill => skill !== value));
}
};
return (
<select multiple={true} value={skills} onChange={handleChange}>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
);
};
export default SelectMultiple;
Когда я запускаю этот код, нажмите HTML, HTML выбран, снова нажмите HTML, очевидно, он не отменяется, потому что событие onChange не имеетуволен.
Каков наилучший способ обойти это? Должен ли я использовать реф вместо? Какова наилучшая практика для такого мультиселектора?