Fatal编程技术网
  • reactjs/
  • Reactjs 如何在React JS中获取多个复选框值？

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

reactjs checkbox

Reactjs 如何在React JS中获取多个复选框值？,reactjs,checkbox,react-hooks,Reactjs,Checkbox,React Hooks,我试图从所有选中的复选框中获取值，并将它们存储在useState中。我能够在表中获取所选行的值，但无法在状态中存储多个所选值。我的代码是 import React, { useState } from "react"; export default function App() { const data = [ { id: "1", name: "Jane", lastName: &quo

我试图从所有选中的复选框中获取值，并将它们存储在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>
  );
}


import React，{useState}来自“React”；
导出默认函数App（）{
常数数据=[
{
id:“1”，
姓名：“简”，
姓：“Doe”，
年龄：“25”
},
{
id:“2”，
姓名：“詹姆斯”，
姓：“Doe”，
年龄：“40”
},
{
id:“3”，
姓名：“Alexa”，
姓：“Doe”，
年龄：“27”
},
{
id:“4”，
姓名：“简”，
姓：“布朗”，
年龄：“40”
}
];
常量[peopleInfo，setPeopleInfo]=useState([
{
id:“”，
首先：“，
最后:，
年龄：“
}
]);
console.log（peopleInfo）；
返回(
{data.map（（项）=>{
返回(
{
setPeopleInfo({
id:item.id，
第一：第一项，
最后：item.last，
年龄：item.age
});
}}
值={peopleInfo}
样式={{margin:“20px”}}
type=“复选框”
/>
{item.name}
{item.lastName}
{item.age}
);
})}
);
}
及

我可以获取所选行的id、名称、姓氏和年龄值，但当我选中“新建”复选框时，前一行的信息会用新的更新。我似乎不知道如何存储多个选中复选框中的所有值。非常感谢您提供的任何帮助和建议。

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

并使用功能状态更新将所有以前的状态复制到新对象中，并更新与特定项的
id
关联的值。确保使用复选框输入的
选中
prop，而不是
值
prop

<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"
/>
我建议使用
item.id
作为键将选定的item对象存储在对象中。这将使用数组提供恒定时间（
O（1）
）值查找，而不是线性时间（
O（n）
）。如果/当您需要通过
Object.values（peopleInfo）
访问的选中值数组时

并使用功能状态更新将所有以前的状态复制到新对象中，并更新与特定项的
id
关联的值。确保使用复选框输入的
选中
prop，而不是
值
prop

<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"
/>
您可以将peopleInfo状态创建为空数组：

const [peopleInfo, setPeopleInfo] = useState([]);
然后在复选框的onChange函数中处理对象数组：

onChange={() => {
   handleChange(item);             
}}

const handleChange = (item) => {
   let tempPeopleInfo = peopleInfo;
   //here we look if your checked item is allready in your array. if so, remove with filter.
   if (tempPeopleInfo.some((people) => people.id === item.id)) {
     tempPeopleInfo = tempPeopleInfo.filter((people) => people.id !== item.id);
   } else {
     tempPeopleInfo.push(item);
   }
   setPeopleInfo(tempPeopleInfo);
};

您可以将peopleInfo状态创建为空数组：

const [peopleInfo, setPeopleInfo] = useState([]);
然后在复选框的onChange函数中处理对象数组：

onChange={() => {
   handleChange(item);             
}}

const handleChange = (item) => {
   let tempPeopleInfo = peopleInfo;
   //here we look if your checked item is allready in your array. if so, remove with filter.
   if (tempPeopleInfo.some((people) => people.id === item.id)) {
     tempPeopleInfo = tempPeopleInfo.filter((people) => people.id !== item.id);
   } else {
     tempPeopleInfo.push(item);
   }
   setPeopleInfo(tempPeopleInfo);
};

一个不错的方法，试试这个。根据检查的真/假，我们可以轻松管理。在发送的同时，我们也可以通过checked过滤掉它

import "./styles.css";

import React, { useState } from "react";
export default function App() {
  
  const [peopleInfos, setPeopleInfo] = useState([
    {
      id: "1",
      name: "Jane",
      lastName: "Doe",
      age: "25",
      checked:false
    },
    {
      id: "2",
      name: "James",
      lastName: "Doe",
      age: "40",
      checked:false
    },
    {
      id: "3",
      name: "Alexa",
      lastName: "Doe",
      age: "27",
      checked:false
    },
    {
      id: "4",
      name: "Jane",
      lastName: "Brown",
      age: "40",
      checked:false
    }
  ]);
  const peopleChecked=(event)=>{
    setPeopleInfo(peopleInfos.map((info)=>{
     return {...info, checked:event.target.checked};
    }));

   // or
   
    // const people = [...peopleInfos];
    // people[index] = {...people[index], checked:event.target.checked};
    // setPeopleInfo([...people]);
  }
  

  console.log(peopleInfos);
  return (
    <div className="App">
      <table>
        <tr>
          {peopleInfos.map((item, index) => {
            return (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  onChange={(event)=>peopleChecked(event, index)}
                  name="people"
                  value={item.checked}
                  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>
  );
}
导入“/styles.css”； 从“React”导入React，{useState}； 导出默认函数App（）{ const[peopleInfos，setPeopleInfo]=useState([ { id:“1”， 姓名：“简”， 姓：“Doe”， 年龄:"25岁",， 勾选：假 }, { id:“2”， 姓名：“詹姆斯”， 姓：“Doe”， 年龄:"40岁",， 勾选：假 }, { id:“3”， 姓名：“Alexa”， 姓：“Doe”， 年龄:"27岁",， 勾选：假 }, { id:“4”， 姓名：“简”， 姓：“布朗”， 年龄:"40岁",， 勾选：假 } ]); const peopleChecked=（事件）=>{ setPeopleInfo（peopleInfos.map）（信息）=>{ 返回{…info，选中：event.target.checked}； })); //或 //const people=[…peopleInfos]； //人员[索引]={…人员[索引]，选中：event.target.checked}； //setPeopleInfo（[…人]）； } console.log（peopleInfos）； 返回( {peopleInfos.map（（项目，索引）=>{ 返回( peopleChecked（事件、索引）} name=“人” 值={item.checked} 样式={{margin:“20px”}} type=“复选框” /> {item.name} {item.lastName} {item.age} ); })} ); }
一个不错的方法，试试这个。根据检查的真/假，我们可以轻松管理。在发送的同时，我们也可以通过checked过滤掉它

import "./styles.css";

import React, { useState } from "react";
export default function App() {
  
  const [peopleInfos, setPeopleInfo] = useState([
    {
      id: "1",
      name: "Jane",
      lastName: "Doe",
      age: "25",
      checked:false
    },
    {
      id: "2",
      name: "James",
      lastName: "Doe",
      age: "40",
      checked:false
    },
    {
      id: "3",
      name: "Alexa",
      lastName: "Doe",
      age: "27",
      checked:false
    },
    {
      id: "4",
      name: "Jane",
      lastName: "Brown",
      age: "40",
      checked:false
    }
  ]);
  const peopleChecked=(event)=>{
    setPeopleInfo(peopleInfos.map((info)=>{
     return {...info, checked:event.target.checked};
    }));

   // or
   
    // const people = [...peopleInfos];
    // people[index] = {...people[index], checked:event.target.checked};
    // setPeopleInfo([...people]);
  }
  

  console.log(peopleInfos);
  return (
    <div className="App">
      <table>
        <tr>
          {peopleInfos.map((item, index) => {
            return (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  onChange={(event)=>peopleChecked(event, index)}
                  name="people"
                  value={item.checked}
                  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>
  );
}
导入“/styles.css”； 从“React”导入React，{useState}； 导出默认函数App（）{ const[peopleInfos，setPeopleInfo]=useState([ { id:“1”， 姓名：“简”， 姓：“Doe”， 年龄:"25岁",， 勾选：假 }, { id:“2”， 姓名：“詹姆斯”， 姓：“Doe”， 年龄:"40岁",， 勾选：假 }, { id:“3”， 姓名：“Alexa”， 姓：“Doe”， 年龄:"27岁",， 勾选：假 }, { id:“4”， 姓名：“简”， 姓：“布朗”， 年龄:"40岁",， 勾选：假 } ]); const peopleChecked=（事件）=>{ setPeopleInfo（peopleInfos.map）（信息）=>{ 返回{…info，选中：event.target.checked}； })); //或 //const people=[…peopleInfos]； //人员[索引]={…人员[索引]，选中：event.target.checked}； //setPeopleInfo（[…人]）； } console.log（peopleInfos）； 返回(