起源
框架是antdesign以后版本为3.2,兼容到4.8;
react版本为16.13;
能够去掉Ts局部代码
业务上需要,验证表单须要有全选的下拉框。
于是通过函数组件先写了一个demo
demo包含表单验证,全选,反向全选性能,获取表单提交数据
import React, { useState } from "react";
import { Select, Button, Divider, Modal, Form, Checkbox, message } from "antd";
const { Option } = Select;
interface optionT {
key: string;
label: string;
}
const SelectAll = (props) => {
const [formVisible, setFormVisible] = useState(false);
const { form } = props;
const { getFieldDecorator, setFieldsValue, validateFields } = form;
const children: optionT[] = [];
for (let i = 10; i < 36; i++) {
const value = {
key: i.toString(36) + i,
label: i.toString(36) + i,
};
children.push(value);
}
const handleOk = () => {
validateFields((err, value) => {
if (err) {
return;
} else {
/* selectAll能够定为最初提交数据的那个字段需做解决取得其value */
// console.log("这里是表单所有数据", value);
setFormVisible(false);
message.info(`这里是表单所有数据:${JSON.stringify(value)}`, 3);
}
});
};
return (
<>
<Divider style={{ marginBottom: "10px" }}></Divider>
<Button onClick={() => setFormVisible(true)}> 表单弹出</Button>
<Modal
visible={formVisible}
title={"全选"}
onCancel={() => setFormVisible(false)}
onOk={() => handleOk()}
>
<Form.Item label="selectAll" key={"selectAll"}>
{getFieldDecorator("selectAll", {
rules: [{ required: true, message: "Choose what you like" }],
})(
<Select
mode="multiple"
labelInValue={true}
placeholder="Please select"
style={{ width: "80%" }}
dropdownRender={(menu) => {
return (
<div>
<div
style={{ padding: "4px 8px 8px 8px", cursor: "pointer" }}
onMouseDown={(e) => e.preventDefault()}
>
<Checkbox
onChange={(e) => {
if (e.target.checked === true) {
/* outValues为本人申请所得数据,留神,key为字符串否则不会回填和打钩
容易造成key值反复,所以表单取得的数据的key也为字符串
*/
// const realValues = outValues.map((item) => {
// return {
// key: `${item.id}`,
// label: item.value,
// };
// });
setFieldsValue({
selectAll: children,
});
} else {
setFieldsValue({
selectAll: [],
});
}
}}
>
全选
</Checkbox>
</div>
<Divider style={{ margin: "2px 0" }} />
{menu}
</div>
);
}}
>
{children.map((item) => {
return <Option key={item.key}>{item.label}</Option>;
})}
</Select>
)}
</Form.Item>
</Modal>
</>
);
};
export default Form.create()(SelectAll);
整体成果