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

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

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>);
  }
});

使用ReactJS处理多个复选框值

1 个答案: