React移动端中实现全选和不选的实现

最新推荐文章于 2023-12-11 20:02:32 发布

小何同学要加油

最新推荐文章于 2023-12-11 20:02:32 发布

阅读量309

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/anony_me/article/details/129162243

版权

在React移动端应用中，可以通过管理数据列表中每个条目的checked属性来实现全选和单选功能。当点击全选按钮时，更新数据列表，将所有checked属性设为相反状态。同时，通过监控数据中每个项的checked状态，当所有项都选中时，全选按钮为选中状态，反之则为未选中。文章提供了一个具体的代码示例来展示这种实现方式。

摘要由CSDN通过智能技术生成

React移动端中实现全选和不选的实现

React移动端中实现点击全选，数据全部选择，数据有一个不选择，全选就不选

下面是一种实现方式，其中的 data 表示要选择的数据列表，每个数据对象中有一个 checked 属性，表示该数据是否被选中。当点击全选按钮时，会将所有数据的 checked 属性设为 true，当数据有一个未被选中时，全选按钮也会被设为未选中状态。

import { useState } from "react";

function App() {
  const [data, setData] = useState([
    { id: 1, name: "John Doe", checked: false },
    { id: 2, name: "Jane Smith", checked: false },
    { id: 3, name: "Bob Johnson", checked: false },
  ]);

  const handleToggleAll = () => {
    const allChecked = data.every((item) => item.checked);
    setData((prevData) =>
      prevData.map((item) => ({ ...item, checked: !allChecked }))
    );
  };

  const handleToggleItem = (id) => {
    setData((prevData) =>
      prevData.map((item) =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return (
    <div>
      <div>
        <label>
          <input
            type="checkbox"
            checked={data.every((item) => item.checked)}
            onChange={handleToggleAll}
          />
          全选
        </label>
      </div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={item.checked}
                onChange={() => handleToggleItem(item.id)}
              />
              {item.name}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App