使用 react 和 hooks 选择和取消选择值答案

【问题标题】：Select and deselect values with react and hooks使用 react 和 hooks 选择和取消选择值
【发布时间】：2021-05-16 15:04:57
【问题描述】：

我正在尝试通过在下面的代码中选择和取消选择语言选项来更改状态。到目前为止，我可以通过添加语言来更新状态，我的问题是，如果我再次单击相同的语言，我会再次将其添加到数组中。谁能解释我如何在再次单击时从数组中添加或删除语言？

export default function Dashboard(props) {

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

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

}

【问题讨论】：

你为什么要给language分配一个数组？变量名表明它应该包含一种语言，而不是语言的集合。
multi select有下拉菜单，他需要修改为languages

标签： javascript reactjs react-hooks state

【解决方案1】：

看起来您唯一的问题是您在处理更新的地方的逻辑。钩子的使用是正确的所以首先你需要设置适当的初始值。当您计划将语言存储在数组中时。

第二部分是更新数组。因此，您可以在数组中找到单击的语言，如果它存在 - 然后使用 filter 设置新值或过滤并比较现有数组和新数组的长度。

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]
        })
  };

【讨论】：

谢谢。这个解决方案很有帮助。

【解决方案2】：

您需要一张旧支票。

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

【讨论】：

【解决方案3】：

如果返回未定义，则在语言数组上使用find() 方法检查所选值，然后推入数组。将状态变量重命名为 languages 否则会造成混淆（命名约定标准）。

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

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

【讨论】：

【解决方案4】：

这里有两件事

而不是拥有

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

使用 json 的语言数组，以便您可以轻松添加它们

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

2.setLanguage 是一个直接的值

setLanguage(changeEvent.target.value)

【讨论】：