踩坑记录四
作者：互联网
Checkbox.Group与Checkbox：
antd的Checkbox.Group是一个很好用的东西，Checkbox.Group的value可以控制其下面的Checkbox组件的勾选状态（当value=[“101”]时，<Checkbox value="101"> 101 </Checkbox> 就会被选中），通过使用Checkbox.Group的value之间组合可以达到多个Checkbox.Group互相控制，可以实现一些自由的操作，例如全选功能：
1 const { placeholder, data, getValueFromTabSelect, selectWidth } = props;
2 const [selectValue, setSelectValue] = useState("");
3 const [selectData, setSelectDate] = useState([...data]);
4 const [checkedList, setCheckedList] = useState([...data]);
5 const [checkedAllList, setCheckedAllList] = useState([""]);
6
7 useEffect(() => {
8 for (let i = 0; i < checkedList.length; i++) {
9 checkedList.pop();
10 }
11 }, []);
12 //onChanggeBox控制onCheckAllChange
13 const onChangeBox = (e: any) => {
14 if (e.target.checked) { //通过checkedList来控制勾选框
15 checkedList.push(JSON.parse(JSON.stringify(e.target.value)));
16 } else {
17 for (let i = 0; i < checkedList.length; i++) {
18 if (e.target.value === checkedList[i]) {
19 checkedList.splice(i, 1);
20 }
21 }
22 }
23 if (checkedList.length > 0) {
24 setSelectValue(`已选中${checkedList.length}项`); //控制Select组件的value属性
25 if (checkedList.length === selectData.length) { //通过onChangeBox来控制onCheckAllChange的勾选框
26 setCheckedAllList(["全选"]);
27 } else {
28 checkedAllList.splice(0, checkedAllList.length);
29 }
30 } else if (checkedList.length === 0) { //当value=null的时候，placeholder属性就可以显示出来
31 setSelectValue("");
32 }
33 };
34 //onCheckAllChange控制onChanggeBox
35 const onCheckAllChange = (e: any) => {
36 // console.log("e.target.checked:", e.target.checked);
37 if (e.target.checked) {
38 checkedList.splice(0, checkedList.length);
39 setCheckedAllList(["全选"]);
40 for (let i = 0; i < selectData.length; i++) {
41 checkedList.push(selectData[i]);
42 }
43 getValueFromTabSelect(data);
44 } else {
45 checkedList.splice(0, checkedList.length);
46 checkedAllList.splice(0, checkedAllList.length);
47 getValueFromTabSelect([]);
48 }
49 if (checkedList.length > 0) {
50 setSelectValue(`已选中${checkedList.length}项`);
51 } else if (checkedList.length === 0) {
52 setSelectValue("");
53 }
54 };
55
56 const dropdownRender = () => {
57 return (
58 <div className="tab-select">
59 <Checkbox.Group
60 value={checkedAllList}>
61 <Checkbox
62 onChange={onCheckAllChange}
63 value="全选">
64 全选
65 </Checkbox>
66 </Checkbox.Group>
67 <div className="tab-select-scorll">
68 <div className="tab-select-hidden-scorll">
69 <Checkbox.Group
70 value={checkedList}>
71 {selectData.map((item: any, index: number) => {
72 return (
73 <Checkbox
74 value={item}
75 onChange={onChangeBox}>
76 {item}
77 </Checkbox>
78 )
79 })}
80 </Checkbox.Group>
81 </div>
82 </div>
83 </div>
84 )
85 };
86
87 return (
88 <>
89 <Select
90 placeholder={placeholder}
91 value={(selectValue.length > 0 ? selectValue : null)}
92 showArrow
93 showSearch={false}
94 dropdownRender={dropdownRender}
95 dropdownMatchSelectWidth={200}
96 dropdownClassName="dropdown-class-name"
97 style={{
98 width: (selectWidth ? selectWidth : 120),
99 }} />
100 </>
101 )
效果如下：
自定义函数组件以及父子之间参数的传递：
1 export default function TabSelect(props: any) {
2
3 const { placeholder, data, getValueFromTabSelect, selectWidth } = props;
4
5 const onChangeBox = (e: any) => {
6 if (e.target.checked) {
7 checkedList.push(JSON.parse(JSON.stringify(e.target.value)));
8 } else {
9 for (let i = 0; i < checkedList.length; i++) {
10 if (e.target.value === checkedList[i]) {
11 checkedList.splice(i, 1);
12 }
13 }
14 }
15 if (checkedList.length > 0) {
16 setSelectValue(`已选中${checkedList.length}项`);
17 if (checkedList.length === selectData.length) {
18 setCheckedAllList(["全选"]);
19 } else {
20 checkedAllList.splice(0, checkedAllList.length);
21 }
22 } else if (checkedList.length === 0) {
23 setSelectValue("");
24 }
25 getValueFromTabSelect(checkedList);
26 // console.log("checkedList:", checkedList);
27 };
28
29 const onCheckAllChange = (e: any) => {
30 // console.log("e.target.checked:", e.target.checked);
31 if (e.target.checked) {
32 checkedList.splice(0, checkedList.length);
33 setCheckedAllList(["全选"]);
34 for (let i = 0; i < selectData.length; i++) {
35 checkedList.push(selectData[i]);
36 }
37 getValueFromTabSelect(data);
38 } else {
39 checkedList.splice(0, checkedList.length);
40 checkedAllList.splice(0, checkedAllList.length);
41 getValueFromTabSelect([]);
42 }
43 if (checkedList.length > 0) {
44 setSelectValue(`已选中${checkedList.length}项`);
45 } else if (checkedList.length === 0) {
46 setSelectValue("");
47 }
48 // console.log("checkedList:", checkedList);
49 };
50
51 const dropdownRender = () => {
52 return (
53 <div className="tab-select">
54 <Checkbox.Group
55 value={checkedAllList}>
56 <Checkbox
57 onChange={onCheckAllChange}
58 value="全选"
59 className="tab-select-checkbox">
60 全选
61 </Checkbox>
62 </Checkbox.Group>
63 <div className="tab-select-scorll">
64 <div className="tab-select-hidden-scorll">
65 <Checkbox.Group
66 value={checkedList}>
67 {selectData.map((item: any, index: number) => {
68 return (
69 <Checkbox
70 className="tab-select-checkbox"
71 value={item}
72 onChange={onChangeBox}>
73 {item}
74 </Checkbox>
75 )
76 })}
77 </Checkbox.Group>
78 </div>
79 </div>
80 </div>
81 )
82 };
83
84 return (
85 <>
86 <Select
87 placeholder={placeholder}
88 value={(selectValue.length > 0 ? selectValue : null)}
89 showArrow
90 showSearch={false}
91 dropdownRender={dropdownRender}
92 dropdownMatchSelectWidth={200}
93 dropdownClassName="dropdown-class-name"
94 style={{
95 width: (selectWidth ? selectWidth : 120),
96 }} />
97 </>
98 )
99 }
View Code
使用方法：
function AllOrders(props: Props) {
function getValueFromSelectRoomNumber(value: any) {
console.log('getValueFromSelectRoomNumber:', value);
}
return (
<TabSelect
placeholder={"选择房间"}
data={["101", "102", "103", "104", "105", "106", "107"]}
getValueFromTabSelect={getValueFromSelectRoomNumber.bind(props)} />
)
}
向其中添加搜索框：
在这里我们额外使用一个数组visable[] 来规定Checkbox的属性是否隐藏，如下：
1 <div className={(visable[index] === "1" ? "tab-select-item" : "tab-select-item-hidden")}>
2 <Checkbox
3 className="tab-select-checkbox"
4 value={item}
5 onChange={onChangeBox}>
6 {item}
7 </Checkbox>
8 </div>
9
10
11 .tab-select-item {
12 padding-top: 4px;
13 padding: 4px 0 0 8px;
14 }
15 .tab-select-item-hidden {
16 display: none;
17 }
使用搜索框的内容来匹配selectDate的数据
1 const tabSelectSearch = (e: any) => {
2 // console.log("e:", e.target.value);
3 let str = e.target.value;
4 if (str.length > 0) {
5 // console.log("visable", visable);
6 let tempData = data;
7 for (let i = 0; i < selectData.length; i++) {
8 let index = selectData[i].indexOf(str);
9 if (index > -1) {
10 // 1代表当前的选择包含我们输入的字符，显示CheckBox
11 tempData[i] = "1";
12 } else {
13 // 0代表当前的选择不包含我们输入的字符，不显示CheckBox
14 tempData[i] = "0";
15 }
16 }
17 tempData.push("0");
18 setVisable([...tempData]);
19 // console.log("visable", visable);
20 } else {
21 let tempData = data;
22 for (let i = 0; i < data.length; i++) {
23 tempData[i] = "1";
24 }
25 tempData.push("1");
26 setVisable([...tempData]);
27 }
28 };
完整代码如下：
1 import { Input, Select, Checkbox } from "antd";
2 import { CheckboxChangeEvent } from "antd/lib/checkbox";
3 import { CheckboxValueType } from "antd/lib/checkbox/Group";
4 import { useEffect, useState } from "react";
5 import "./index.less";
6
7
8 export default function TabSelect(props: any) {
9
10 const { placeholder, data, getValueFromTabSelect, selectWidth } = props;
11
12 const [checked, setChecked] = useState(false);
13 const [visable, setVisable] = useState([...data]);
14 const [selectValue, setSelectValue] = useState("");
15 const [selectData, setSelectDate] = useState([...data]);
16 const [checkedList, setCheckedList] = useState([...data]);
17 const [checkedAllList, setCheckedAllList] = useState([""]);
18
19 useEffect(() => {
20 let tempData = [];
21 for (let i = 0; i < data.length; i++) {
22 tempData.push("1");
23 checkedList.pop();
24 }
25 tempData.push("1");
26 setVisable([...tempData]);
27 }, []);
28
29 const tabSelectSearch = (e: any) => {
30 // console.log("e:", e.target.value);
31 let str = e.target.value;
32 if (str.length > 0) {
33 // console.log("visable", visable);
34 let tempData = data;
35 for (let i = 0; i < selectData.length; i++) {
36 let index = selectData[i].indexOf(str);
37 if (index > -1) {
38 tempData[i] = "1";
39 } else {
40 tempData[i] = "0";
41 }
42 }
43 tempData.push("0");
44 setVisable([...tempData]);
45 // console.log("visable", visable);
46 } else {
47 let tempData = data;
48 for (let i = 0; i < data.length; i++) {
49 tempData[i] = "1";
50 }
51 tempData.push("1");
52 setVisable([...tempData]);
53 }
54 };
55
56 const onChangeBox = (e: any) => {
57 if (e.target.checked) {
58 checkedList.push(JSON.parse(JSON.stringify(e.target.value)));
59 } else {
60 for (let i = 0; i < checkedList.length; i++) {
61 if (e.target.value === checkedList[i]) {
62 checkedList.splice(i, 1);
63 }
64 }
65 }
66 if (checkedList.length > 0) {
67 setSelectValue(`已选中${checkedList.length}项`);
68 if (checkedList.length === selectData.length) {
69 setCheckedAllList(["全选"]);
70 } else {
71 checkedAllList.splice(0, checkedAllList.length);
72 }
73 } else if (checkedList.length === 0) {
74 setSelectValue("");
75 }
76 getValueFromTabSelect(checkedList);
77 // console.log("checkedList:", checkedList);
78 };
79
80 const onCheckAllChange = (e: any) => {
81 // console.log("e.target.checked:", e.target.checked);
82 if (e.target.checked) {
83 checkedList.splice(0, checkedList.length);
84 setCheckedAllList(["全选"]);
85 for (let i = 0; i < selectData.length; i++) {
86 checkedList.push(selectData[i]);
87 }
88 getValueFromTabSelect(data);
89 } else {
90 checkedList.splice(0, checkedList.length);
91 checkedAllList.splice(0, checkedAllList.length);
92 getValueFromTabSelect([]);
93 }
94 if (checkedList.length > 0) {
95 setSelectValue(`已选中${checkedList.length}项`);
96 } else if (checkedList.length === 0) {
97 setSelectValue("");
98 }
99 // console.log("checkedList:", checkedList);
100 };
101
102 const dropdownRender = () => {
103 return (
104 <div className="tab-select">
105 <Input
106 placeholder="请输入"
107 onChange={tabSelectSearch}
108 onPressEnter={tabSelectSearch}
109 className="tab-select-search" />
110 <div className={(visable[visable.length - 1] === "1" ? "tab-select-item" : "tab-select-item-hidden")}>
111 <Checkbox.Group
112 value={checkedAllList}>
113 <Checkbox
114 onChange={onCheckAllChange}
115 value="全选"
116 className="tab-select-checkbox">
117 全选
118 </Checkbox>
119 </Checkbox.Group>
120 </div>
121 <div className="tab-select-scorll">
122 <div className="tab-select-hidden-scorll">
123 <Checkbox.Group
124 value={checkedList}>
125 {selectData.map((item: any, index: number) => {
126 return (
127 <div className={(visable[index] === "1" ? "tab-select-item" : "tab-select-item-hidden")}>
128 <Checkbox
129 className="tab-select-checkbox"
130 value={item}
131 onChange={onChangeBox}>
132 {item}
133 </Checkbox>
134 </div>
135 )
136 })}
137 </Checkbox.Group>
138 </div>
139 </div>
140 </div>
141 )
142 };
143
144 return (
145 <>
146 <Select
147 placeholder={placeholder}
148 value={(selectValue.length > 0 ? selectValue : null)}
149 showArrow
150 showSearch={false}
151 dropdownRender={dropdownRender}
152 dropdownMatchSelectWidth={200}
153 dropdownClassName="dropdown-class-name"
154 style={{
155 width: (selectWidth ? selectWidth : 120),
156 }} />
157 </>
158 )
159 }
View Code
隐藏scroll，代码如下：
1 <div className="scorll">
2 <div className="scorll-hidden">
3
4 </div>
5 </div>
6
7 .scorll {
8 position: relative;
9 width: 100%;
10 height: 100%;
11 overflow: hidden; // 父元素需要隐藏scroll
12 }
13 .scorll-hidden {
14 position: absolute;
15 overflow-y: scroll;
16 overflow-x: hidden;
17 top: 0;
18 right: -17px;
19 bottom: 0;
20 left: 0;
21 }
如果父级元素没有overflow: hidden;就可能会出现下面的情况
文本过长使用省略号代替：
代码如下，需要注意的是元素或者父级元素最好指定max-width的大小，防止div直接溢出：
1 <div className="show-list-item-content">
2 <div className="show-list-item-send-id">
3 {item.sendName}
4 </div>
5 <div className="show-list-item-send-msg">
6 {item.content}
7 </div>
8 </div>
9
10 .show-list-item-content {
11 flex: 1;
12 max-width: calc(100% - 142px);
13 display: flex;
14 flex-direction: column;
15 border-left: #eef3f2 1px solid;
16 border-right: #eef3f2 1px solid;
17 padding: 0 16px;
18 margin: 0 16px;
19 }
20 .show-list-item-send-id {
21 font-weight: 600;
22 }
23 .show-list-item-send-msg {
24 color: rgba(0, 0, 0, 0.6);
25 // max-width: 100%;
26 white-space: nowrap;
27 overflow: hidden;
28 text-overflow: ellipsis;
29 }
View Code
transform失效：
因为transform只能转换由盒子模型定位的元素。设置display的值为盒子模型的相关的都可以。
标签：const,target,记录,tempData,length,let,checkedList 来源： https://www.cnblogs.com/bqyb/p/16489969.html