执行 onChange 方法后如何禁用复选框？答案

【问题标题】：How to disable a checkbox after executing onChange method?执行 onChange 方法后如何禁用复选框？
【发布时间】：2020-03-29 12:26:41
【问题描述】：

一旦我选中复选框并执行 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>;

复选框位于渲染方法中。一个用户选中复选框，该复选框需要检查并自行禁用它

【问题讨论】：

标签： javascript html reactjs input

【解决方案1】：

一些注意点：

使用 camelCase 作为函数名
使用 props value 让复选框完全受控
使用道具disabled禁用输入元素
在处理函数中设置相关状态
在你目前的情况下不需要document.getElementById
handler event 不是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>

【讨论】：

我希望在执行 onchange 方法时能够禁用一个复选框

【解决方案2】：

你应该在元素上附加id。

let Disable=(id)=>{
    if(id){
      document.getElementById(id).disabled = true
    }
}

<span>
        <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="one"  value=""/>
               <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="two"  value=""/>
                      <input type="checkbox" className="form-check-input" onChange="Disable(this.id)"  id="three" value=""/>
                    </span>

【讨论】：

禁用 =(id) =>{ if(id){ id.disabled=true; } this.props.onClick(); }

【解决方案3】：

在匿名箭头函数中传递event 并在eventHandler(component method) 中将其作为argument 接受并使用event.target 在这种情况下有适当的方法来执行此操作您需要访问呼叫者。

class Stack extends Component {
  Disable = event => {
    event.target.disabled = true;
    //another method to execute onChange
  };

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

【讨论】：