Получите значение флажка, используя ref в React

Ответ 1

Для флажка используйте "checked" вместо "value":

var MyForm = React.createClass({
  save: function () {
    console.log(this.refs.check_me.checked);
  },

  render: function () {
    return <div><h1>MyForm</h1>
      <div className="checkbox">
        <label>
          <input type="checkbox" ref="check_me" /> Check me out
        </label>
      </div>
      <button className="btn btn-default" onClick={this.save}>Submit</button>
    </div>
  }
});

В результате:

Ответ 2

Вы можете сделать флажок управляемым элементом, прослушивая onChange и присваивая ему значение state. Попробуйте следующее:

var MyForm = React.createClass({
  save: function(){
    console.log(this.refs.check_me.value);
  },

  toggleCheckboxValue: () => {
    this.setState({checkBoxValue: !this.state.checkboxValue});
  },

  render: function(){
    return <div><h1>MyForm</h1>
        <div className="checkbox">
            <label>
                <input type="checkbox" ref="check_me" value={this.state.checkboxValue} onChange={this.toggleCheckboxValue} /> Check me out
            </label>
        </div>
        <button className="btn btn-default" onClick={this.save}>Submit</button>
    </div>
  }
});

всякий раз, когда установлен флажок, он запускает функцию toggleCheckboxValue, которая будет переключать значение this.state.checkboxValue.

Не забудьте инициализировать функцию this.state.checkboxValue в вашем коде.

Примечание.. Как отметил Иварни, вы можете использовать значение checked специально для флажков, а не value. Хотя оба решения будут работать.

Ответ 3

Существует классический способ поймать событие и соответствующие значения с помощью:

event.target.checked, event.target.name

Вы можете увидеть пример:

class MyForm extends React.Component {
    onChangeFavorite(event){
        console.log(event.target.checked, event.target.name);
    };
    render(){
        return (<div><h1>MyForm</h1>
            <div className="checkbox">
                <label>
                    <input type="checkbox" name="myCheckBox1" onChange={this.onChangeFavorite} defaultChecked={false} /> Check me out
                </label>
            </div>
            <button className="btn btn-default" onClick={this.save}>Submit</button>
        </div>)
    };
};