从字符串数组 ReactJS 中删除项目答案

【问题标题】：Remove item from String Array ReactJS从字符串数组 ReactJS 中删除项目
【发布时间】：2021-12-28 16:47:33
【问题描述】：

我正在使用带有 Typescript 的 ReactJS，目标是拥有一个复选框组件，该组件根据复选框是否被选中来添加和删除字符串数组中的项目。我当前的函数只添加到数组中，所以当我选择然后取消选择一个复选框时，该项目被添加了两次。提前致谢。

功能：

  const handleGroupChange = (groupOptions: any) => {
    const existSelection = selectedGroups;
    existSelection.push(groupOptions.target.value);
    setSelectedGroups(existSelection);
    }
  };

复选框：

 <FormControlLabel
   control={
    <Checkbox
      color="primary"
      onChange={e => handleGroupChange(e)}
      value={"MATCHED_MENTORS"}
      />
      }

【问题讨论】：

检查目标是否被选中，取决于你可以删除或添加一个值到你的状态，if(groupOptions.target.checked)

标签： reactjs typescript user-interface web

【解决方案1】：

检查 onChange 事件上的复选框是否被选中。

const handleGroupChange = (groupOptions: any) => {
        const existSelection = selectedGroups;
    
        if (groupOptions.target.checked) {
            existSelection.push(groupOptions.target.value);
        } else {
            var index = existSelection.indexOf(groupOptions.target.value);
            if (index !== -1) {
                existSelection.splice(index, 1);
            }
        }
    
        setSelectedGroups(existSelection);
    }

【讨论】：

【解决方案2】：

您需要检查复选框boolean property 是否为checked。请按照下面的示例进行操作，这里是Codesandbox

  const [selectedGroups, setSelectedGroups] = useState([]);

  const handleGroupChange = (groupOptions) => {
    let existSelection = selectedGroups;

    if (groupOptions.target.checked)
      existSelection.push(groupOptions.target.value);
    else
      existSelection = existSelection.filter(item => item !== groupOptions.target.value)

    console.log(selectedGroups);
    setSelectedGroups(existSelection);

【讨论】：

【解决方案3】：

这里的问题是您将布尔值作为项目推送，因此existSelection 数组应该或多或少类似于[true, false, true, false]。如果这是您想要的行为，那应该是值得一看的。

如果我正确理解你想要练习的内容，也许你可以试试这个：

const randomStrings = ['gelato', 'frozen_yogurt', 'ice_cream'];

然后，当您单击复选框时，它将触发 onChange，它将连接到 handleGroupChange 函数，这看起来像：

const handleGroupChange = (isChecked) = {
  if(isChecked){
    //We create a random number between 0 and 2
    const randomIndex = Math.floor(Math.random() * 2);
    //We select an element from randomStrings array based on the random 
      index generated above
    const randomStr = this.randomStrings[randomIndex];
    //Looks if the randomStr already exist in existSelection
      if nothing found it findIndex returns - 1 wich tell us 
      this item is not in the array so we push it. 
    const existInArr = this.existSelection.findIndex(randomStr);
    if(existInArr === - 1){
      existSelection.push(randomStr);
    }
    //I guess you also wanna feed a useState hook here.
    setExistSelection(randomStr);
  }
};

这应该可以解决问题。

【讨论】：