在选中复选框时运行事件

Question

我想创建一个应用程序，当我单击该复选框时，将其禁用。因此，如果我将单击第一个复选框，则禁用第一个，依此类推。为此，我做了：

function onChange(checkedValues) {
  console.log("checked = ", checkedValues);
}
const disabled = false;

const check = e => {
  console.log(e.target.disabled);
  let a = e.target.disabled;
  return disabled === true;
};

ReactDOM.render(
  <Checkbox.Group style={{ width: "100%" }} onChange={onChange}>
    <Row>
      <Col span={8}>
        <Checkbox disabled={disabled} onChange={check} value="A">
          A
        </Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="B">B</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="C">C</Checkbox>
      </Col>
    </Row>
  </Checkbox.Group>,
  document.getElementById("container")

但是它不起作用。如何修复代码？演示：https://codesandbox.io/s/use-with-grid-ant-design-demo-87ycs?file=/index.js:156-822

Answer 1

在此vanilla-js示例中使用e.currentTarget（您的检查功能与vanilla中的基本功能相同：]

function check(e){
  e.currentTarget.disabled = true;
}

Array.from(document.querySelectorAll('input')).forEach(function(el){
  el.addEventListener('change',check);
});

<input type="checkbox" value="a" />A <br />
<input type="checkbox" value="b" />B <br />
<input type="checkbox" value="c" />C <br />

Answer 2

使用数组映射和存储禁用状态就可以了。

---

const list = ["A", "B", "C"];

const YourComponent = () => {
  const [disabled, setDisabled] = React.useState(
    new Array(list.length).fill(false)
  );
  const check = idx => e => {
    const temp = [...disabled];
    temp[idx] = true;
    setDisabled(temp);
  };
  return (
    <Checkbox.Group style={{ width: "100%" }} onChange={onChange}>
      <Row>
        {list.map((x, idx) => (
          <Col span={8}>
            <Checkbox
              key={idx}
              disabled={disabled[idx]}
              onChange={check(idx)}
              value={x}
            >
              {x}
            </Checkbox>
          </Col>
        ))}
      </Row>
    </Checkbox.Group>
  );
};

ReactDOM.render(<YourComponent />, document.getElementById("container"));

---

演示：

Answer 3

类似的方法会起作用：https://codesandbox.io/s/use-with-grid-ant-design-demo-ucpgr

所以总结一下：

• 用于检查当前复选框的自定义组件，如果已选中，则将其禁用
• 将状态存储在上下文中，因此我们不必每次都通过道具传递状态