如果選中將值添加到數組，則反應復選框

Question

嗨，這可能是一個非常新手的問題，但這是我的問題。 我有代表一周中所有日子的復選框。 如果選中了一天，我想將其添加到數組中，以便在提交時可以將數組傳遞到后端。 我從引導程序復制復選框結構開始。 我嘗試添加邏輯以查看是否選中了一個框，如果選中，我想將其推送到 state 中的空數組。 此外，如果選中了復選框但未選中，我想從 state 數組中刪除該項目。 到目前為止，我還沒有找到一種方法來完成這一切。

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 state 數組。 如果event.target.id已經存在於workDays state 中，您可以對其進行過濾。 這是工作代碼片段。

 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(
<>
 {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>
         ))
             )}
   <>
)

我使用的是材料 UI 設計，因此使用了 Grid 和 Paper，您也可以替換為 div

Answer 5

注意：為了正確運行它，您需要通過以下命令安裝 react boostrap。

npm 我反應引導

問題已得到解答，但我的代碼將幫助那些想要在反應功能組件中實現它的人，只需復制粘貼代碼，您將能夠了解其背后的邏輯。 我正在使用 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

上面的代碼同樣會更新鈎子：

Answer 6

我已經用功能組件完成了這里的代碼。如果您直接在 handleChange 中進行控制台，請使用 useEffect 掛鈎來控制台最新值，您將比最新值落后 1 個值。

可尋求任何幫助。

    import React, { useState, useEffect } from "react";

    export default function App() {
    const [dataArray, setdataArray] = useState([]);

    const handleChange = (e)=>{
    // setisChecked(e.target.checked);
    if(e.target.checked === true){
      setdataArray([...dataArray, e.target.value]);
    }
    else if(e.target.checked === false){
      let freshArray = dataArray.filter(val => val !== e.target.value);
      setdataArray([...freshArray]);
    }
  }

  useEffect(()=>{

    console.log(dataArray);

  }, [dataArray]);


  return (
    <>
    <input 
      type="checkbox"
      value='Monday'
      onChange={e => handleChange(e)} 
      />
      <span>Monday</span>

    <input 
      type="checkbox"
      value='Tuesday'
      onChange={e => handleChange(e)} 
      />
      <span>Tuesday</span>
    <input 
      type="checkbox"
      value='Wednesday'
      onChange={e => handleChange(e)} 
      />
      <span>Wednesday</span>
    <input 
      type="checkbox"
      value='Thursday'
      onChange={e => handleChange(e)} 
      />
      <span>Thursday</span>
    <input 
      type="checkbox"
      value='Friday'
      onChange={e => handleChange(e)} 
      />
      <span>Friday</span>
    <input 
      type="checkbox"
      value='Saturday'
      onChange={e => handleChange(e)} 
      />
      <span>Saturday</span>
    <input 
      type="checkbox"
      value='Sunday'
      onChange={e => handleChange(e)} 
      />
      <span>Sunday</span>
    </>
  )
}