如何在 React JS 中获取多个复选框值？

Question

我试图从所有选定的复选框中获取值并将它们存储在 useState 中。我能够获取表中所选行的值，但无法在状态中存储多个所选值。我的代码是

import React, { useState } from "react";
export default function App() {
  const data = [
    {
      id: "1",
      name: "Jane",
      lastName: "Doe",
      age: "25"
    },
    {
      id: "2",
      name: "James",
      lastName: "Doe",
      age: "40"
    },
    {
      id: "3",
      name: "Alexa",
      lastName: "Doe",
      age: "27"
    },
    {
      id: "4",
      name: "Jane",
      lastName: "Brown",
      age: "40"
    }
  ];

  const [peopleInfo, setPeopleInfo] = useState([
    {
      id: "",
      first: "",
      last: "",
      age: ""
    }
  ]);

  console.log(peopleInfo);
  return (
    <div className="App">
      <table>
        <tr>
          {data.map((item) => {
            return (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  onChange={() => {
                    setPeopleInfo({
                      id: item.id,
                      first: item.first,
                      last: item.last,
                      age: item.age
                    });
                  }}
                  value={peopleInfo}
                  style={{ margin: "20px" }}
                  type="checkbox"
                />
                <td style={{ margin: "20px" }}>{item.name}</td>
                <td style={{ margin: "20px" }}>{item.lastName}</td>
                <td style={{ margin: "20px" }}>{item.age}</td>
              </div>
            );
          })}
        </tr>
      </table>
    </div>
  );
}

和代码沙盒

我能够获取所选行的 ID、姓名、姓氏和年龄值，但是当我选择新复选框时，前一行的信息将更新为新的信息。我似乎无法弄清楚如何存储多个选定复选框中的所有值。非常感谢任何帮助和建议。

Answer 1

拥有一个包含您选择的人员的数组是可以的。

const [peopleInfo, setPeopleInfo] = useState([]);

你想要做的是使用e.target.checkedvalue 来修改上面的数组。

<input
  onChange={(e) => {
    // add to list
    if (e.target.checked) {
      setPeopleInfo([
        ...peopleInfo,
        {
          id: item.id,
          first: item.name,
          last: item.lastName,
          age: item.age,
        },
      ]);
    } else {
      // remove from list
      setPeopleInfo(
        peopleInfo.filter((people) => people.id !== item.id),
      );
    }
  }}
  value={peopleInfo}
  style={{ margin: '20px' }}
  type="checkbox"
/>

结果可以从 访问peopleInfo。

Answer 2

我建议使用 作为item.id键将您选择的项目对象存储在一个对象中。这将为您提供恒定时间 ( ) 值查找，而不是使用数组的O(1)线性时间 ( )。O(n)如果/当您需要通过 访问的检查值数组时Object.values(peopleInfo)。

const [peopleInfo, setPeopleInfo] = useState({});

并使用功能状态更新将所有先前状态复制到新对象中，并更新与特定项目的id. 确保使用复选框输入的checkedprop 而不是valueprop。

<input
  onChange={() => {
    setPeopleInfo((state) => ({
      ...state, // <-- shallow copy previous state
      [item.id]: state[item.id] // <-- update value by id
        ? null
        : {
        id: item.id,
        first: item.name, // <-- use name property
        last: item.lastName, // <-- use lastName property
        age: item.age
      }
    }));
  }}
  checked={peopleInfo[item.id]} // <-- use checked prop, retrieve value by id
  style={{ margin: "20px" }}
  type="checkbox"
/>

完整代码：

export default function App() {
  const [peopleInfo, setPeopleInfo] = useState({});

  useEffect(() => {
    console.log(peopleInfo);
  }, [peopleInfo]);

  return (
    <div className="App">
      <table>
        <tr>
          {data.map((item) => {
            return (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  onChange={() => {
                    setPeopleInfo((state) => ({
                      ...state,
                      [item.id]: {
                        id: item.id,
                        first: item.name,
                        last: item.lastName,
                        age: item.age
                      }
                    }));
                  }}
                  value={peopleInfo[item.id]}
                  style={{ margin: "20px" }}
                  type="checkbox"
                />
                <td style={{ margin: "20px" }}>{item.name}</td>
                <td style={{ margin: "20px" }}>{item.lastName}</td>
                <td style={{ margin: "20px" }}>{item.age}</td>
              </div>
            );
          })}
        </tr>
      </table>
    </div>
  );
}

回调优化

将回调逻辑分解onChange为一个函数，该函数使用item您想要切换的复选框状态。我建议使用柯里化函数，这样您就可以包含回调值并避免不必要的匿名回调。

const toggleHandler = (item) => () => {
  setPeopleInfo((state) => ({
    ...state,
    [item.id]: state[item.id]
      ? null
      : {
          id: item.id,
          first: item.name,
          last: item.lastName,
          age: item.age
        }
  }));
};

...

<input
  onChange={toggleHandler(item)} // <-- pass item to handler
  checked={peopleInfo[item.id]}
  style={{ margin: "20px" }}
  type="checkbox"
/>