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

Question

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

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

禁用方法位于组件类中的渲染方法之前

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

一些注意点：使用驼峰命名法作为函数名使用 props值使复选框完全受控使用禁用属性来禁用输入元素在处理函数内设置相关状态document.getElementById在你目前的情况下不需要处理程序事件不是id，如果您只需要id，请将其作为参数传递this.handler(id)演示：const App = () => {&nbsp; const [checked, setChecked] = React.useState(false);&nbsp; const [status, setStatus] = React.useState(true);&nbsp; const onChangeHandler = () => {&nbsp; &nbsp; setChecked(!checked);&nbsp; &nbsp; setStatus(false);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; value={checked}&nbsp; &nbsp; &nbsp; &nbsp; disabled={!status}&nbsp; &nbsp; &nbsp; &nbsp; onChange={onChangeHandler}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );};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>

Answer 2

你应该必须附加id到 element 上。let Disable=(id)=>{&nbsp; &nbsp; if(id){&nbsp; &nbsp; &nbsp; document.getElementById(id).disabled = true&nbsp; &nbsp; }}<span>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="one"&nbsp; value=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="two"&nbsp; value=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" className="form-check-input" onChange="Disable(this.id)"&nbsp; id="three" value=""/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

Answer 3

event在匿名箭头函数中传递 并将其作为 in 接受argument并eventHandler(component method)使用event.target在需要访问调用者的情况下，有适当的方法可以做到这一点。class Stack extends Component {&nbsp; Disable = event => {&nbsp; &nbsp; event.target.disabled = true;&nbsp; &nbsp; //another method to execute onChange&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="form-check-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => this.Disable(event)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value=""&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="form-check-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => this.Disable(event)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value=""&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="form-check-input"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => this.Disable(event)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value=""&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; );&nbsp; }}