0

Есть imput checkbox, состояние которого пишется в соответсвующий стейт функцией

handleChangeTextInput = (event) => {
    var tar = event.target.name;
    var val = event.target.value;
    this.setState({[tar]: val});
}

Проблема в том что значение "on" при клике на чекбокс прописывается в стейт, а при снятии галочки почему то нет. Второй вопрос: вероятно засовывать значение каждого чекбокса в свой стейт плохая идея, и для однотипных чекбоксов следует делать массив? Примерно как?

1 ответ 1

2

Можно в стейт хранить значение checked, мне кажется это более логичным

class App extends React.Component {
  state = {
    one: false,
    two: false,
    three: true,
  };
  
  onChangeHandler = event => {
    const { name, chacked } = event.target;
    this.setState({ [name]: chacked });
  }

  render() {
    const { one, two, three } = this.state;
    return (
      <form onChange={this.onChangeHandler}>
        <input type="checkbox" name="one" checked={one} />
        <input type="checkbox" name="two" checked={two} />
        <input type="checkbox" name="three" checked={three} />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.