使用 ReactJS 处理多个复选框值

Question

我正在尝试学习 ReactJS 并创建一个小杂务列表，其中添加了杂务的名称和应该完成杂务的日期。

但我不知道在处理表单提交时如何获取选中复选框的数组。

我想要在我的 newChore.handleSubmit 中有一个包含所有检查值的数组。

var NewChore = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();
        var name = this.refs.name.value;
        console.log(this.refs.test);
    },
    render: function () {
        return (
            <form className="ChoreForm" onSubmit={this.handleSubmit}>
                <div>
                    <label htmlFor="name">Naam</label>
                    <input type="text" ref="name" id="name" />
                </div>
                <div>
                    <Day number="1" name="Monday" ref="test" />
                    <Day number="2" name="Tuesday" ref="test" />
                </div>
                <input type="submit" value="Opslaan" />
            </form>
        );
    }
});

var Day = React.createClass({
    render: function () {
        return (<div>
            <input type="checkbox" onChange={this.handleChange} ref="day_number" id="day_{this.props.number}" /><label htmlFor="day_{this.props.number}">{this.props.name}</label>
        </div>);
    }
});

Answer 1

你也可以在 props 中传递函数，就像你必须在父组件中声明句柄更改函数一样：

var NewChore = React.createClass({
  handleSubmit: function (e) {
    e.preventDefault();
    var name = this.refs.name.value;
    console.log(this.refs.test);
  },
  handleChange: function (e) {
  },
  render: function () {
    return (
      <form className="ChoreForm" onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="name">Naam</label>
          <input type="text" ref="name" id="name" />
        </div>
        <div>
          <Day number="1" name="Monday" ref="test" onHandleChange={this.handleChange} />
          <Day number="2" name="Tuesday" ref="test" onHandleChange={this.handleChange} />
        </div>
        <input type="submit" value="Opslaan" />
      </form>
    );
  }
});

并将此功能传递给您的子组件，例如

<Day number="1" name="Monday" ref="test" onHandleChange={this.handleChange}/>

并使用到您的子组件中

var Day = React.createClass({
  render: function () {
    return (<div>
        <input type="checkbox" onChange={this.props.onHandleChange} ref="day_number" id="day_{this.props.number}" /><label htmlFor="day_{this.props.number}">{this.props.name}</label>
    </div>);
  }
});