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

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

Answer 2

看看这是否有帮助。

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

  handleCheckboxChange = (event) => {
    if (event.target.checked) {
      if (!this.state.workDays.includes(event.target.value)) {
        this.setState(prevState => ({ workDays: [...prevState.workDays, event.target.value]}))
      }
    } else {
      this.setState(prevState => ({ workDays: prevState.workDays.filter(day => day !== event.target.value) }));
    }
  }


  render() {
    return (
      <React.Fragment>
        <form>
          <div>
            <h5>Select your workday(s):</h5>
            <div class="custom-control custom-checkbox" >
              {
                ["Monday", "Tuesday", /*... */].map(day => {
                  return (
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id={day} value={day} onChange={this.handleCheckboxChange} />
                      <label class="custom-control-label" for={day}>{day}</label>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </form>
        <button >Save settings</button>
      </React.Fragment>

    );
  }
}

Answer 3

没有必要保留选中哪些框的数组。您可以在保存数据时轻松收集所有选中的复选框。

const checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');

如果您有不同的复选框组，您可以使用唯一的 class 来标识组：

const checkedBoxes = document.querySelectorAll('input[class=unique-class]:checked');

Answer 4

const [category_check_list, setCategoryCheckList] = useState([]);
const categoryCheckboxFilterHandler = e => {
    if (e.target.checked == true){
        setCategoryCheckList([...category_check_list, Number(e.target.value)]);
    }else{
        let check_list = [];
        category_check_list.map(check => {
            if (Number(check) != Number(e.target.value)){
                check_list.push(Number(check));
            }
        });
        setCategoryCheckList(check_list);
    }
};
var checked_category_id_list = category_check_list.toString();

然后在 return 中，我放置了以下代码，它对我来说非常有效，因为现在它是动态的

return(
<>
 {categoriesQuery.isLoading ? (
   <span>Loading...</span>
    ) : categoriesQuery.isError ? (
    categoriesQuery.error.message
    ) : (
    categoriesQuery.data.slice(0, list_limit).map((category) => (
    <Grid item key={category.id} >
     <Paper className={paper}>
      <div className="form-check">
 <label htmlFor={category.id} className="form-check-label-form_check_label">
 <input className="form-check-label form_checkbox" type="checkbox" 
        name={category.category_name} value={category.id}  id={category.id} 
        onChange={e => categoryCheckboxFilterHandler(e)} />
             {category.category_name}
   </label>
                       </div>
               </Paper>
            </Grid>
         ))
             )}
   <>
)

我使用的是 material UI 设计，因此使用了网格和纸张，您也可以替换为 div

Answer 5

注意： 为了运行它正确你需要通过下面的命令安装 react boostrap。

npm i react-bootstrap

问题已回答，但我的代码将帮助那些想在反应功能组件中实现它的人，只需复制粘贴代码，您就可以了解其背后的逻辑。我用的是react bootstrap 你可以用任何东西，概念是一样的。

import React, {useState } from "react";
import Form from "react-bootstrap/Form";
import 'bootstrap/dist/css/bootstrap.min.css';

function RolesList(props) {


const [permissions,setPermissions] = useState([]);


const handleCheck = (event) => {
  var permissions_array = [...permissions];
  if (event.target.checked) {
    permissions_array = [...permissions, event.target.value];
  } else {
    permissions_array.splice(permissions.indexOf(event.target.value), 1);
  }
  setPermissions(permissions_array);

};


  return (
    <>
     
 <form> 
     <Form.Check 
        type={'checkbox'}
        name={"permission"}
        id={'permission'}
        label={'permission1'}
        value={'1'}
        onChange={handleCheck}

      />

<Form.Check 
        type={'checkbox'}
        name={"permission"}
        id={'permission'}
        label={'permission2'}
        value={'2'}
        onChange={handleCheck}

      />

</form>


    </>

)

}



export default RolesList

上面的代码同样会更新挂钩：

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

React checkbox if checked add value to array

javascript

reactjs

checkbox

checked