javascript - 无法在 Material UI 中选中循环中的复选框

Question

我正在使用 Material-UI 和 React Hooks。我正在运行一个循环，在其中打印复选框。我无法选中或取消选中它们。它们似乎是只读的。当我点击它们时没有任何反应。我登录控制台查看，挂钩工作正常，selectedExpertArr状态正在正确更新，但未检查复选框。

代码如下：

const [selectedExpertArr, setSelectedExpertArr] = useState([]);

处理函数如下：

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

循环代码如下：

         <DialogContent>
                <List>
                    {expertNames.map(expert => (
                    <ListItem button key={expert.id}>
                        <Checkbox
                            checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }
                            name="expertCheckbox"
                            onChange={handleSelectedExperts}
                            value={expert.id}
                            color="primary"
                            inputProps={{ 'aria-label': 'expert checkbox' }}
                        />
                        <ListItemText primary={expert.username} />
                    </ListItem>
                    ))}
                </List>
        </DialogContent>

标签： javascriptreactjscheckboxmaterial-uireact-hooks

Answer 1

是e.target.value字符串类型，但似乎expert.id是数字。所以你要添加到clonedExpertArr字符串但搜索数字(selectedExpertArr.indexOf(expert.id) > -1)

要更正，请转换e.target.value为数字+e.target.value

更正后的代码将是

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(+e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== +e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

工作演示