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

Posted 2023-03-05

【中文标题】如果选中，则反应复选框将值添加到数组

【英文标题】：React checkbox if checked add value to array

【发布时间】：2020-09-11 03:36:14

【问题描述】：

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

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

【参考方案1】：

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

您可以使用spread 运算符将值添加到您的workDays 状态数组。如果event.target.id 已经存在于workDays 状态，您可以过滤它。这是工作代码 sn-p。

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

【参考方案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>

    );
  

【讨论】：

感谢您的回答。当我选中一个框 TypeError: Cannot read property 'value' of null

时出现此错误

【参考方案3】：

没有必要保留一个包含选中框的数组。 保存数据时，您可以轻松收集所有选中的复选框。

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

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

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

【参考方案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(
<>
 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 设计，因此使用了 Grid 和 Paper，您也可以替换为 div