使用ReactJS处理多个复选框值

我正在尝试学习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>);
    }
});

var NewChore=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
var name=this.refs.name.value；
console.log（this.refs.test）；
},
渲染：函数（）{
返回(
纳姆
);
}
});
var Day=React.createClass({
渲染：函数（）{
返回(
{this.props.name}
);
}
});

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

var NewChore=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
var name=this.refs.name.value；
console.log（this.refs.test）；
},
handleChange:函数（e）{
},
渲染：函数（）{
返回(
纳姆
);
}
});

并将此函数传递给您的子组件，如

并使用到您的子组件中

var Day=React.createClass({
渲染：函数（）{
返回(
{this.props.name}
);
}
});

我想一定是这样的，是的。我是否应该在我的数据中保留一个数组，包含正在检查/未检查的内容，对吗？不过，对于这样一个简单的复选框列表来说，似乎有点过头了。注意：不要忘记为onchange propyes添加属性，您必须维护checked和unchecked元素