REACT全选单选

简介: REACT全选单选

身为react初学者,遇到这个问题记录一下,在代码编译器里面可以直接运行,不会存在一点报错,测试了很多遍了,

就不放gif图片了

效果展示:可能不是特别明显

如上图所示

下方是全部代码

1. import React, { useEffect, useState } from "react";
2. import { Stepper, Checkbox } from "react-vant";
3. function calculateTotalQuantity(cart) {
4.   let totalQuantity = 0;
5. for (let item of cart) {
6.     totalQuantity += item.num;
7.   }
8. return totalQuantity;
9. }
10. export default function App() {
11.   const [list, setList] = useState([
12.     { name: "上官二" },
13.     { name: "张三" },
14.     { name: "李四" },
15.     { name: "王五" },
16.     { name: "赵六" },
17.     { name: "李七" },
18.     { name: "真的是" },
19.   ]);
20.   const [allChecked, setAllChecked] = useState(false);
21. // useEffect(() => {
22. //     // render()
23. // }, []);
24.   useEffect(() => {
25. if (list.length === list.filter((item) => item.checked).length) {
26.       setAllChecked(true);
27.     } else {
28.       setAllChecked(false);
29.     }
30.   }, [list]);
31. 
32.   useEffect(() => {
33. if (allChecked) {
34.       setList(
35.         list.map((item) => {
36.           item.checked = true;
37. return item;
38.         })
39.       );
40.     } else {
41.       setList(
42.         list.map((item) => {
43.           item.checked = false;
44. return item;
45.         })
46.       );
47.     }
48.   }, [allChecked]);
49. return (
50. <div>
51.       {list.map((item, index) => (
52. <div key={item.id}>
53. <div style={{ display: "flex" }}>
54. <Checkbox
55.               checked={item.checked}
56.               onChange={(checked) => {
57.                 setList(() => {
58.                   let arr = [...list];
59.                   arr[index].checked = checked;
60. return arr;
61.                 });
62.               }}
63. />
64. <div>
65. <p>{item.name}</p>
66. </div>
67. </div>
68. </div>
69.       ))}
70. <div>
71. <Checkbox
72.           checked={allChecked}
73.           onChange={setAllChecked}
74.           style={{ background: "white" }}
75. />
76. </div>
77. </div>
78.   );
79. }

有什么建议可以在评论区写出来,共同探讨,互相学习。

目录
打赏
0
0
0
0
295
分享
相关文章
React 单选按钮 Radio Button 详解
本文介绍 React 中单选按钮的基础概念、基本用法、常见问题及进阶技巧,包括如何正确设置 `checked` 属性、确保 `name` 属性一致、处理 `onChange` 事件,以及动态生成单选按钮和使用受控组件等,通过代码示例详细解析,帮助开发者有效管理状态和优化用户交互。
239 32
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
264 1
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
175 68
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
158 67
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
167 62
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
151 22
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
170 30
React 音频音量控制组件 Audio Volume Control
在现代Web应用中,音频播放功能不可或缺。React以其声明式编程和组件化开发模式,非常适合构建复杂的音频音量控制组件。本文介绍了如何使用HTML5 `&lt;audio&gt;`元素与React结合,实现直观的音量控制系统,并解决了常见问题如音量范围不合理、初始音量设置及性能优化等,帮助开发者打造优秀的音频播放器。
165 27
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `&lt;audio&gt;`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
148 6
React 音频播放控制组件 Audio Controls
本文介绍了如何使用React构建音频播放控制组件,涵盖HTML5 `&lt;audio&gt;`标签和React组件化思想的基础知识。针对常见问题如播放状态管理、进度条更新不准确及跨浏览器兼容性,提供了详细的解决方案和代码示例。同时,还总结了易错点及避免方法,如确保音频加载完成再操作、处理音频错误等,帮助开发者实现稳定且功能强大的音频播放器。
181 11
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问