執行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

一些注意點：

• 使用駝峰命名法作為函數名
• 使用 props值使復選框完全受控
• 使用禁用道具禁用輸入元素
• 在處理程序函數中設置相關狀態
• 在您當前的情況下不需要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>

Answer 2

你應該在 element 上附加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>

Answer 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>
    );
  }
}