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><inputtype="checkbox"checked={data.every((item) => item.checked)}onChange={handleToggleAll}/>全选</label></div><ul>{data.map((item) => (<li key={item.id}><label><inputtype="checkbox"checked={item.checked}onChange={() => handleToggleItem(item.id)}/>{item.name}</label></li>))}</ul></div>);
}
export default App

效果：

React移动端中实现全选和不选的实现相关推荐

android gridview item添加checkbox,手把手教你实现GridView中Checkbox全选
全选效果图这节讲得相对比较基础的东西,高手请忽略. 首先新建一个GridviewAdapter继承BaseAdapter public class GridviewAdapter extends B ...
react服务端/客户端，同构代码心得
FKP-REST是一套全栈javascript框架 react服务端/客户端,同构代码心得作者:webkixi react服务端/客户端,同构代码心得服务端,客户端同构一套代码,大前端的梦想,为了 ...
React Native工程中TSLint静态检查工具的探索之路
背景建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查 ...
手把手带你用next搭建一个完善的react服务端渲染项目（集成antd、redux、样式解决方案）
前言本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目,也算是做个笔记吧. 源码地址 github.com/sl1673495/n- 介绍 Next ...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐> React 移动端 UI 组件库 1. Taro UI for React - 京东出品,多端 ...
【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章课程导学 01-01 课程介绍一. ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
React服务端渲染实现（基于Dva)
React服务端渲染实现 (基于Dva) 功能基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再 ...
vue+elementUI 添加多个可以全选的多选框
elementUI-checkbox官网:https://element.eleme.cn/#/zh-CN/component/checkbox 一.要做上面这种效果,首先要了解全选框中indeter ...

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

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

React移动端中实现全选和不选的实现相关推荐

最新文章

热门文章