如何在执行 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 = () => {

  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

你应该必须附加id到 element 上。

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在匿名箭头函数中传递 并将其作为 in 接受argument并eventHandler(component method)使用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>

    );

  }

}