Select 并使用 react 和 hooks 取消选择值

Question

I am trying to change the state by selecting and deselecting the language option in the code below. So far I can update the state by adding a language, my problem is that, if I click on the same language again, I will add it another time to the array. Can anyone explain me how to add or remove the language from the array when clicked one more time?

export default function Dashboard(props) {

const [language, setLanguage] = useState('');

const handleLanguageChange = changeEvent => {
    changeEvent.persist()
    setLanguage(prevState => [...prevState, changeEvent.target.value])
  };

}

Answer 1

You will need a good old check.

if (!languages.includes(changeEvent.target.value) {
    // code to add the language
}

Answer 2

It looks like your only issue is your logic in the place where you are handling update. Usage of hooks is correct So first of all you need to set proper initial value. As you plan to store your languages in an array.

Second part is updating the array. So you can either find clicked language in the array and if it is exist - then use filter to set your new value or filter and compare length of existing array and new one.

const [language, setLanguage] = useState([]);

const handleLanguageChange = changeEvent => {
    changeEvent.persist()
    setLanguage(prevState => {
            const lang = changeEvent.target.value;

            if (prevState.includes(lang) {
                return prevState.filter(el => el !== lang);
            }

            return [...prevState, lang]
        })
  };

Answer 3

Check the selected value using find() method on language array if it returns undefined, then push into array. Rename the state variable as languages otherwise it's confusing (Naming convention standard).

const [languages, setLanguages] = useState('');

const handleLanguageChange = changeEvent => {
    changeEvent.persist()
    if (!languages.find(value => value == changeEvent.target.value)) {
        setLanguages(prevState => [...prevState, changeEvent.target.value])
    }
};

Answer 4

2 Things here

1. Instead of having

    <option value="Deutsch">Deutsch</option> <option value="Englisch">Englisch</option>

use an languages array of json so it bacomes easy for you to add them like

 languages= [{value='Deutsch',name= 'Deutsch',...}] 

2.setLanguage sa a direct value

setLanguage(changeEvent.target.value)