Как отключить флажок после выполнения метода 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

Некоторые замечания:

• используйте camelCase для имени функции
• используйте реквизиты значение , чтобы сделать флажок полностью контролируемым
• использовать реквизиты отключено для отключения элемента ввода
• установить соответствующее состояние внутри функции обработчика
• нет необходимости в 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 к элементу.

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 в функции анонимной стрелки и принимая ее как 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>
    );
  }
}