如果选中，则将复选框添加到数组中]]

Question

您好，这可能是一个非常新手的问题，但这是我的问题。我有代表一周中所有日子的复选框。如果选中了一天，我想将其添加到数组中，以便在提交时可以将数组传递到后端。我从启动复制了复选框结构。我试图添加逻辑以查看是否选中了框，以及是否选中了框，我想将其推入状态为空数组。另外，如果选中了一个复选框，但又未选中它，那么我想从状态数组中删除该项目。到目前为止，我还没有找到一种方法来使所有这些工作。

import React from 'react'

class CalenderSettingsModal extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            workStart: 8,
            workEnd: '',
            workDays:[],

        }

        handleCheckboxChange = (event)=> this.setState({workDays: event.target.value});


    }

    render() {


        return (
            <React.Fragment>
                        <form>
                            <div>
                                <h5>Select your workday(s):</h5>
                                <div class="custom-control custom-checkbox " >
                                    <input type="checkbox" class="custom-control-input" id="monday" value="monday"  onChange={this.handleCheckboxChange}/>
                                    <label class="custom-control-label" for="monday">Monday</label>

                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="tuesday" value="tuesday" onChange={ this.handleCheckboxChange}/>
                                    <label class="custom-control-label" for="tuesday">Tuesday</label>

                                </div>

                        </form>
                            <button >Save settings</button>



            </React.Fragment>

        );
    }
}

export default CalenderSettingsModal;

到目前为止，在选中该框但不起作用时，我试图完成将值分配给workDays的操作，并且我不确定如何完成我想做的事情。任何见识将不胜感激。

您好，这可能是一个非常新手的问题，但这是我的问题。我有代表一周中所有日子的复选框。如果检查了一天，我想将其添加到数组中，以便在提交时... ...>

Answer 1

现在，您正在将workDays数组分配为string类型。

您可以使用spread运算符将值添加到workDays状态数组。如果event.target.id状态中已经存在workDays，则可以对其进行过滤。这是工作代码段。

Answer 2

看看是否有帮助。

Answer 3

不必保留检查框的数组。保存数据时，您可以轻松收集所有复选框。