单击一个复选框会停用整个输入的原因答案

【问题标题】：The reason why clicking on one checkbox deactivates the entire input单击一个复选框会停用整个输入的原因
【发布时间】：2022-01-11 00:47:38
【问题描述】：

我面临一个我似乎知道但我不知道的问题。我通过 [checked] 制作了“State”。有一个问题，如果你把它转到地图上，只点击一个复选框，就会点击整个。所以我放了{cked[idx]}来解决，但是我的学长告诉我代码有问题。因为[checked]是“布尔”的形式，idx是“数字”。

并且输入具有“禁用”属性。我知道这也被整体停用，因为我输入了“已签入”。顺便说一句，我希望当我按下复选框时它们中的每一个都被停用。但我不知道怎么做。我搜索了堆栈溢出，但找不到与我类似的案例。我相信你们可以帮助我。

const [checked, setChecked] = useState(false);
.
.
.
{keys &&
          keys?.map((item: any, idx: number) => {
            return (
              <div key={idx}>
                <Box component="form" className={classes.Box}>
                  <div className={classes.typeText}>{item.columnName}</div>
                  <div className={classes.flexWrap}>
                    <TextField
                      id="outlined-basic"
                      label={item.type}
                      variant="outlined"
                      className={classes.filled}
                      disabled={checked} //hear❗️
                    />
                    <FormControlLabel
                      value="end"
                      control={
                        <Checkbox
                          className={classes.checkBox}
                          color="primary"
                          checked={checked[idx]} //hear❗️
                          onChange={handleCheckboxChange}
                        />
                      }
                      label="Null"
                      labelPlacement="end"
                    />
                  </div>
                </Box>
              </div>
            );
          })}

【问题讨论】：

你可以为每个item添加一个选中的属性吗？
你的意思是checked={item.checked}？
是的，这是一种方法。更改该属性时还需要更新状态
但不幸的是，它不起作用。

标签： javascript reactjs typescript material-ui next.js

【解决方案1】：

将您的文本字段和复选框移动到不同的组件，以便每个组件都有自己的状态。

function CheckComponent = (item, handleCheckboxChange) => {
  const [checked, setChecked] = useState(false);

  return (
    <Box component="form" className={classes.Box}>
      <div className={classes.typeText}>{item.columnName}</div>
      <div className={classes.flexWrap}>
        <TextField
          id="outlined-basic"
          label={item.type}
          variant="outlined"
          className={classes.filled}
          disabled={checked}
        />
        <FormControlLabel
          value="end"
          control={
            <Checkbox
              className={classes.checkBox}
              color="primary"
              checked={checked}
              onChange={handleCheckboxChange}
            />
          }
          label="Null"
          labelPlacement="end"
        />
      </div>
    </Box>
  );
}

然后根据需要渲染任意数量

{keys && keys?.map((item: any, idx: number) => {
  <CheckComponent key={idx} item={item} handleCheckboxChange={() => console.log("clicked", idx); } />
})}

类似的东西。

【讨论】：