如何在react中處理多個復選框并收集被選中的復選框

我目前正在開發一個可以選擇多個復選框的過濾器組件。

現在我想切換復選框的狀態（目前可以實作，并且可以作業），并將選中的復選框存盤在一個陣列中。

如果一個復選框未被選中，它當然應該從陣列中洗掉。我已經嘗試了 useState 鉤子，但是沒有成功 --> 復選框被多次添加，而未被選中的復選框沒有被洗掉。

以下是當前的狀態：

 //這里我創建了一個有固定大小的陣列（基于接收的資料）
  const [checkboxState, setCheckboxState] = useState(new Array( receivedData. length).fill(false)）。)
  //通過這個useState我想收集選中的復選框。
  const [checkedCheckboxes, setCheckedCheckboxes] = useState([] )。
    
  //這是我的處理方法，當一個復選框被選中/不被選中時被觸發。
  //...并切換復選框的狀態。
  const handleCheckboxState = （position: number）=> {
    const updatedCheckedState = checkboxState.map((item, index) =>  (index == position ? !item : item)) 。
    setCheckboxState(upedCheckedState)。
    collectCheckedCheckboxes（）。
  };

  // 通過這個方法，我想把選中的復選框推到陣列中。
  // ...并洗掉未選中的。
  const collectCheckedCheckboxes = (/span>) => {
    checkboxState.map((item, index) =>  {
      if (item ==true) {
        return checkedCheckboxes.push（receivedData[index]）。
      } else {
        return checkedCheckboxes.slice（index, 1）。
      }
    });
  };

復選框的渲染方式是這樣的：

 <div className="checkboxes"/span>>
    {receivedData?.map((data, index) =>/span> (
      <CheckBox。
        value={data.value}。
        checked={checkboxState[index]}。
        onChange={() => handleCheckboxState(index)}
      />
    ))}
  </div>

我做錯了什么？

uj5u.com熱心網友回復：

你的CheckBox-component不包含一個key屬性。這對React識別哪些專案發生了變化、被添加或被洗掉是有幫助的。

來源。https://reactjs.org/docs/lists-and-keys.html

我也不明白為什么你有兩個狀態，checkboxState和checkedCheckboxes。這是否有其他原因？我認為用一個單一的狀態會更容易，這個狀態保存了選中的復選框的索引（或值）。

[在評論后更新]

下面的代碼是OP所期望的解決方案，即在React狀態中擁有所選物件的值。

span class="hljs-keyword">const { useState } = React。

const Checkboxes = (/span>) => {
  //通過這個useState我想收集選中的復選框。
  const [checkedCheckboxes, setCheckedCheckboxes] = useState([] );

  //這是我的處理方法，當一個復選框被選中/不被選中時被觸發。
  //...并切換復選框的狀態。
  const handleCheckboxChange = （data）=> {
    const isChecked = checkedCheckboxes.some(checkedCheckbox => checkedCheckbox. value == data.value)
    if (isChecked) {
      setCheckedCheckboxes(
        checkedCheckboxes.filter(
          (checkedCheckbox) => checkedCheckbox.value !== data.value!
        )
      );
    } else {
      setCheckedCheckboxes(checkedCheckboxes.concat（data）)。
    }
  };

  const receivedData = [{ value: "A"/span> }, { value: "B"/span> }, { value: "C" }]。

  return (
    <>
      <div className="checkboxes"> 
        <h1>Checkboxes：</h1>
        {receivedData?.map((data, index) => (
          <input
            key={`cb-${index}`} 。
            value={data.value}。
            type="checkbox" 
            checked={checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value == data.value)}。
            onChange={() => handleCheckboxChange(data) }
          />
        ))}
      </div> 
      <div>/span>
        <h1>狀態：</h1> 
        <pre>{JSON.stringify(checkedCheckboxes, null, 2)}</pre> 
      </div>/span>
    </>
  );
};

ReactDOM. render(<Checkboxes /> , document. getElementById("app"))。

標籤：

上一篇：如何在一個頁面上回傳它應該顯示一次通知？

下一篇：通過$elemMatch從陣列的特定元素中選擇特定欄位