javascript - 如果选中将值添加到数组，则 react 复选框

Question

嗨，这可能是一个非常新手的问题，但这是我的问题。我有代表一周中所有日子的复选框。如果选中了一天，我想将其添加到数组中，以便在提交时可以将数组传递到后端。我从 Bootstrap 复制复选框结构开始。我尝试添加逻辑以查看是否选中了一个框，如果选中，我想将其推送到处于状态的空数组中。此外，如果选中了复选框但未选中，我想从状态数组中删除该项目。到目前为止，我还没有找到一种方法来完成这一切。

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