如果选中，则响应复选框将值添加到数组

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您可以对其进行过滤。这是工作代码片段。

 handleCheckboxChange = event => {
    let newArray = [...this.state.workDays, event.target.id];
    if (this.state.workDays.includes(event.target.id)) {
      newArray = newArray.filter(day => day !== event.target.id);
    } 
    this.setState({
      workDays: newArray
    });
  };