react关于点击一个复选框全部选中的解决方法-阿里云开发者社区

关于点击一个复选框全部选中的解决方法，这里我采用的是ant Design组件演示的

关于react怎么创建可以看往篇文章http://t.csdn.cn/9ngVp

首先呢是效果对比

点击前：看不出丝毫问题

点击后：全部选中了

这是一组假数据，假设是我们从接口后台请求到的数据

1. const datas = [
2.     {
3. "id": 1,
4. "name": "王武",
5. "tel": "123120086",
6. "project_id": 5,
7. "labor_type": 1,
8. "jobs": "1234岗位",
9. "grade": 39,
10. "pname": "项目三",
11. "status": 0
12.     },
13.     {
14. "id": 2,
15. "name": "10086",
16. "tel": "95277",
17. "project_id": 6,
18. "labor_type": 0,
19. "jobs": "111",
20. "grade": 0,
21. "pname": "项目四",
22. "status": 0
23.     },
24.     {
25. "id": 3,
26. "name": "199和吃饭喝茶789",
27. "tel": "9527",
28. "project_id": 2,
29. "labor_type": 0,
30. "jobs": "111",
31. "grade": 0,
32. "pname": null,
33. "status": 0
34.     },
35.     {
36. "id": 4,
37. "name": "测试199",
38. "tel": "10089",
39. "project_id": 6,
40. "labor_type": 0,
41. "jobs": "12",
42. "grade": 0,
43. "pname": "项目四",
44. "status": 0
45.     },
46.     {
47. "id": 5,
48. "name": "小黑之",
49. "tel": "12312312",
50. "project_id": 93,
51. "labor_type": 0,
52. "jobs": "9",
53. "grade": 0,
54. "pname": "冰海恋雨",
55. "status": 0
56.     },
57.     {
58. "id": 6,
59. "name": "1",
60. "tel": "13132323232",
61. "project_id": 6,
62. "labor_type": 1,
63. "jobs": "1123",
64. "grade": 25,
65. "pname": "项目四",
66. "status": 1
67.     },
68.     {
69. "id": 7,
70. "name": "31231231",
71. "tel": "123123123123",
72. "project_id": 3,
73. "labor_type": 2,
74. "jobs": "111",
75. "grade": 39,
76. "pname": "项目一",
77. "status": 0
78.     },
79.     {
80. "id": 8,
81. "name": "叶天帝",
82. "tel": "10086",
83. "project_id": 3,
84. "labor_type": 2,
85. "jobs": "打鱼人",
86. "grade": 39,
87. "pname": "项目一",
88. "status": 1
89.     },
90.     {
91. "id": 9,
92. "name": "张恒恒",
93. "tel": "345653422",
94. "project_id": 57,
95. "labor_type": 1,
96. "jobs": "123",
97. "grade": 18,
98. "pname": "嗷嗷",
99. "status": 2
100.     },
101.     {
102. "id": 10,
103. "name": "赵四",
104. "tel": "1656283652631",
105. "project_id": 6,
106. "labor_type": 3,
107. "jobs": "测试",
108. "grade": 29,
109. "pname": "项目四",
110. "status": 1
111.     },
112.     {
113. "id": 11,
114. "name": "李四",
115. "tel": "1636353455",
116. "project_id": 4,
117. "labor_type": 3,
118. "jobs": "测试",
119. "grade": 21,
120. "pname": "项目二",
121. "status": 1
122.     },
123.     {
124. "id": 12,
125. "name": "王五",
126. "tel": "1625364533455",
127. "project_id": 4,
128. "labor_type": 3,
129. "jobs": "测试",
130. "grade": 0,
131. "pname": "项目二",
132. "status": 1
133.     },
134.     {
135. "id": 13,
136. "name": "王阿豪",
137. "tel": "1234567",
138. "project_id": 4,
139. "labor_type": 1,
140. "jobs": "测试",
141. "grade": 26,
142. "pname": "项目二",
143. "status": 2
144.     }
145. ]

组件部分

渲染表格部分

1.   const columns: ColumnsType<DataType> = [
2.     {
3.       title: 'id',
4.       dataIndex: 'id',
5.       render: (text: string) => <a>{text}</a>,
6.     },
7.     {
8.       title: 'name',
9.       dataIndex: 'name',
10.     },
11.     {
12.       title: 'tel',
13.       dataIndex: 'tel',
14.     },
15.     {
16.         title: 'project_id',
17.         dataIndex: 'project_id',
18.       },
19.       {
20.         title: 'labor_type',
21.         dataIndex: 'labor_type',
22.       },
23.       {
24.         title: 'jobs',
25.         dataIndex: 'jobs',
26.       },
27.       {
28.         title: 'grade',
29.         dataIndex: 'grade',
30.       },
31.       {
32.         title: 'pname',
33.         dataIndex: 'pname',
34.       },
35. 
36.       {
37.       title: 'status',
38.       dataIndex: 'status',
39.     },
40.   ];

复选框部分

1. const rowSelection = {
2.     onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
3.       console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
4.     },
5.     getCheckboxProps: (record: DataType) => ({
6.       disabled: record.name === 'Disabled User', // Column configuration not to be checked
7.       name: record.name,
8.     }),
9.   };

html部分

1. <div>
2. <Radio.Group
3.         onChange={({ target: { value } }) => {
4.           setSelectionType(value);
5.         }}
6. value={selectionType}
7. >
8. <Radio value="checkbox">Checkbox</Radio>
9. <Radio value="radio">radio</Radio>
10. </Radio.Group>
11. 
12. <Divider />
13. 
14. <Table
15.         rowSelection={{
16. type: selectionType,
17.           ...rowSelection,
18.         }}
19. columns={columns}
20.         dataSource={datas}
21. />
22. </div>

基于目前以上代码已经可以首先表格的渲染了，但是我们现在点击复选框还是会全部选中，因为他缺少一个参数，给他的组件加上rowKey：idxiamian

这个时候就没问题了

下面是完整代码

感兴趣的话可以看看

1. import React, { useState } from 'react';
2. import { Divider, Radio, Table } from 'antd';
3. import type { ColumnsType } from 'antd/es/table';
4. 
5. export default function lianxi() {
6. const datas = [
7.     {
8. "id": 1,
9. "name": "王武",
10. "tel": "123120086",
11. "project_id": 5,
12. "labor_type": 1,
13. "jobs": "1234岗位",
14. "grade": 39,
15. "pname": "项目三",
16. "status": 0
17.     },
18.     {
19. "id": 2,
20. "name": "10086",
21. "tel": "95277",
22. "project_id": 6,
23. "labor_type": 0,
24. "jobs": "111",
25. "grade": 0,
26. "pname": "项目四",
27. "status": 0
28.     },
29.     {
30. "id": 3,
31. "name": "199和吃饭喝茶789",
32. "tel": "9527",
33. "project_id": 2,
34. "labor_type": 0,
35. "jobs": "111",
36. "grade": 0,
37. "pname": null,
38. "status": 0
39.     },
40.     {
41. "id": 4,
42. "name": "测试199",
43. "tel": "10089",
44. "project_id": 6,
45. "labor_type": 0,
46. "jobs": "12",
47. "grade": 0,
48. "pname": "项目四",
49. "status": 0
50.     },
51.     {
52. "id": 5,
53. "name": "小黑之",
54. "tel": "12312312",
55. "project_id": 93,
56. "labor_type": 0,
57. "jobs": "9",
58. "grade": 0,
59. "pname": "冰海恋雨",
60. "status": 0
61.     },
62.     {
63. "id": 6,
64. "name": "1",
65. "tel": "13132323232",
66. "project_id": 6,
67. "labor_type": 1,
68. "jobs": "1123",
69. "grade": 25,
70. "pname": "项目四",
71. "status": 1
72.     },
73.     {
74. "id": 7,
75. "name": "31231231",
76. "tel": "123123123123",
77. "project_id": 3,
78. "labor_type": 2,
79. "jobs": "111",
80. "grade": 39,
81. "pname": "项目一",
82. "status": 0
83.     },
84.     {
85. "id": 8,
86. "name": "叶天帝",
87. "tel": "10086",
88. "project_id": 3,
89. "labor_type": 2,
90. "jobs": "打鱼人",
91. "grade": 39,
92. "pname": "项目一",
93. "status": 1
94.     },
95.     {
96. "id": 9,
97. "name": "张恒恒",
98. "tel": "345653422",
99. "project_id": 57,
100. "labor_type": 1,
101. "jobs": "123",
102. "grade": 18,
103. "pname": "嗷嗷",
104. "status": 2
105.     },
106.     {
107. "id": 10,
108. "name": "赵四",
109. "tel": "1656283652631",
110. "project_id": 6,
111. "labor_type": 3,
112. "jobs": "测试",
113. "grade": 29,
114. "pname": "项目四",
115. "status": 1
116.     },
117.     {
118. "id": 11,
119. "name": "李四",
120. "tel": "1636353455",
121. "project_id": 4,
122. "labor_type": 3,
123. "jobs": "测试",
124. "grade": 21,
125. "pname": "项目二",
126. "status": 1
127.     },
128.     {
129. "id": 12,
130. "name": "王五",
131. "tel": "1625364533455",
132. "project_id": 4,
133. "labor_type": 3,
134. "jobs": "测试",
135. "grade": 0,
136. "pname": "项目二",
137. "status": 1
138.     },
139.     {
140. "id": 13,
141. "name": "王阿豪",
142. "tel": "1234567",
143. "project_id": 4,
144. "labor_type": 1,
145. "jobs": "测试",
146. "grade": 26,
147. "pname": "项目二",
148. "status": 2
149.     }
150. ]
151. console.log(datas);
152. 
153. // 表格
154. interface DataType {
155. key: React.Key;
156.     name: string;
157.     age: number;
158. address: string;
159.   }
160. 
161.   const columns: ColumnsType<DataType> = [
162.     {
163.       title: 'id',
164.       dataIndex: 'id',
165.       render: (text: string) => <a>{text}</a>,
166.     },
167.     {
168.       title: 'name',
169.       dataIndex: 'name',
170.     },
171.     {
172.       title: 'tel',
173.       dataIndex: 'tel',
174.     },
175.     {
176.         title: 'project_id',
177.         dataIndex: 'project_id',
178.       },
179.       {
180.         title: 'labor_type',
181.         dataIndex: 'labor_type',
182.       },
183.       {
184.         title: 'jobs',
185.         dataIndex: 'jobs',
186.       },
187.       {
188.         title: 'grade',
189.         dataIndex: 'grade',
190.       },
191.       {
192.         title: 'pname',
193.         dataIndex: 'pname',
194.       },
195. 
196.       {
197.       title: 'status',
198.       dataIndex: 'status',
199.     },
200.   ];
201. 
202. 
203. // rowSelection object indicates the need for row selection
204. const rowSelection = {
205.     onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
206.       console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
207.     },
208.     getCheckboxProps: (record: DataType) => ({
209.       disabled: record.name === 'Disabled User', // Column configuration not to be checked
210.       name: record.name,
211.     }),
212.   };
213.   const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
214. 
215. // 123
216. return (
217. <div>
218. 
219. <div>
220. <Radio.Group
221.         onChange={({ target: { value } }) => {
222.           setSelectionType(value);
223.         }}
224. value={selectionType}
225. >
226. <Radio value="checkbox">Checkbox</Radio>
227. <Radio value="radio">radio</Radio>
228. </Radio.Group>
229. 
230. <Divider />
231. 
232. <Table
233.       rowKey='id'
234.         rowSelection={{
235. type: selectionType,
236.           ...rowSelection,
237.         }}
238. columns={columns}
239.         dataSource={datas}
240. />
241. </div>
242. 
243. </div>
244.   )
245. }

react关于点击一个复选框全部选中的解决方法

热门文章

最新文章

相关课程

相关电子书