javascript - 如何在执行 onChange 方法后禁用复选框？

Question

我希望能够在选中复选框并执行 onChange 方法后禁用该复选框。

我能够找到一种方法来做到这一点，但是一旦选中多个项目，只有最近选中的复选框被禁用。

disable 方法位于组件类中的 render 方法之前

Disable = id => {
  document.getElementById(id).disabled = true;
  //another method to execute onchange
};

<span>
  <input
    type="checkbox"
    className="form-check-input"
    onChange={this.Disable}
    value=""
  />
</span>;

该复选框位于渲染方法内部。用户选中复选框后，该复选框需要自行选中并禁用

Answer 1

一些注意点:

• 使用驼峰命名法作为函数名称
• 使用 Prop value使复选框完全受控
• 使用 Prop disabled禁用输入元素
• 在处理函数内设置相关状态
• 在您当前的情况下不需要 document.getElementById
• 处理程序事件不是 id，如果您只需要 id，请将其作为参数传递 this.handler(id)

演示:

const App = () => {
  const [checked, setChecked] = React.useState(false);
  const [status, setStatus] = React.useState(true);
  const onChangeHandler = () => {
    setChecked(!checked);
    setStatus(false);
  };
  return (
    <div className="App">
      <input
        type="checkbox"
        value={checked}
        disabled={!status}
        onChange={onChangeHandler}
      />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>