小编imk*_*eVr的帖子

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

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，我不确定如何完成我想做的事情。任何见解将不胜感激。

嗨，我正在制作一个带有 React 的项目，我注意到，使用我制作和设计的一些按钮，当单击它时，它们有时会出现看起来很奇怪的蓝色边框。我试图通过设置border:none !important甚至尝试覆盖它的颜色来摆脱它，但我似乎无法摆脱它。我只是使用 scss 进行样式设置并且也已经react-bootstrap安装了。

这是具有蓝色边框的按钮的示例：

按钮代码

// button 1

<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
          <div  className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
            <Gravatar email={employee.email} className="employee-gravatar" />
            <div>
               <p className="employee-name">{employee.firstname} {employee.lastname}</p>
               <p className="employee-job">{employee.jobTitle}</p>
              </div>
           </div>
</button>

// button 2

  <button className="btn" onClick={this.openPopUp}>Create new client</button>

造型

// button 1
        .employee-button {

            .employee-card {
                display: flex;
                flex-direction: row;
                background-color: $white;
                width: 250px;
                height: 70px;
                padding: 10px;
                border-radius: 10px;
                margin-left: 15px;
                

                .employee-gravatar { …