- Select 的清空按钮（"X"）在iPhone手机上点击时，触发onClear事件很困难。
原因：按钮面积太小，导致在iPhone端老是触发到ant-select-selector这个表单，使用户无法触发onClear事件。
解决方法：重写"X"样式，把按钮面积增大。
.ant-select-clear {
top: 1px !important;
margin-top: 0 !important;
right: 1px !important;
padding-right: 11px !important;
width: auto !important;
height: 50px !important;
line-height: 50px !important;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
- Upload 在MAC系统中，上传Word文件不成功
原因： file.type返回是空的
解决方法：
const checkWordFile = (name: string) => {
const fileEnd = name.substr(name.lastIndexOf(".") + 1).toLocaleLowerCase();
return fileEnd === "docx" || fileEnd === "doc";
};
const customBeforeUpload = (file: RcFile, FileList: RcFile[], controlError: (error: boolean) => void) => {
console.info("file: ", file);
const isLt2M = file.size / 1024 / 1024 < 10;
controlError(false);
return new Promise<any>((resolve, reject) => {
console.info("checkWordFile: ", checkWordFile(file.name));
if ((file.type !== "" && !fileType.find(it => file.type.toLocaleLowerCase().includes(it.toLocaleLowerCase()))) || (file.type === "" && !checkWordFile(file.name))) {
controlError(true);
reject();
}
if (!isLt2M) {
controlError(true);
reject();
}
resolve(file as any);
});
};
在beforeUpload函数中新增一个 file.type为""的验证：file.type === null && !checkWordFile(file.name);
MAC上传Word文件：file.type === ""
- Form.List使用 与 shouldUpdate的使用
const [form] = useForm();
const subjectData = [
{
value: "java",
name: "Java",
catalogue: [
{
value: "java catalogue-1",
name: "Java Catalogue-1",
},
{
value: "java catalogue-2",
name: "Java Catalogue-2",
},
{
value: "java catalogue-3",
name: "Java Catalogue-3",
},
],
},
{
value: "javaScript",
name: "JavaScript",
catalogue: [
{
value: "css",
name: "CSS",
},
{
value: "react",
name: "React",
},
{
value: "vue",
name: "Vue",
},
],
},
];
const resetValue = (name: any, subjectValue: string | null) => {
const subjects = form.getFieldsValue();
const {subject} = subjects;
const newSubject = subject.map((it: any, index: any) => {
if (index === name) {
return {...it, value: subjectValue};
}
return it;
});
form.setFieldsValue({subject: newSubject});
};
{/* 默认一条数据：initialValues={{subject: [{}]}} */}
<Form layout="vertical" className="vertical_layout_form_wrap" form={form} name="basic" initialValues={{subject: [{}]}}>
<Form.List name="subject">
{(fields, {add, remove}) => {
console.info("fields: ", fields);
let catalogue: Catalogue[] = [];
return (
<Row gutter={24}>
<Col>
{fields.map(({key, name, ...restField}) => {
return (
<Space key={name} style={{display: "flex"}} align="baseline">
<Form.Item {...restField} name={[name, `name`]}>
<Select
onChange={() => {
console.info("name: ", name);
resetValue(name, null);
}}
style={{width: "150px"}}
placeholder="Name"
>
{subjectData.map(subject => (
<Option key={subject.value} value={subject.value}>
{subject.name}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, curValues) => {
console.info("prevValues: ", prevValues);
console.info("curValues: ", curValues);
return prevValues.subject !== curValues.subject;
}}
>
{({getFieldValue}) => {
const values = getFieldValue("subject");
const currentCatalogue = subjectData.filter(data => data.value === values?.[name]?.name)?.map(data => data?.catalogue);
catalogue = (currentCatalogue.length > 0 ? currentCatalogue[0] : []) as Catalogue[];
return (
<Form.Item {...restField} name={[name, `value`]}>
<Select
style={{width: "150px"}}
placeholder="Value"
showSearch
allowClear
filterOption={(input: string, value: any) => value.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
onSearch={value => {
console.info("value: ", value);
console.info("name: ", name); //use "name" it means "key"
}}
onSelect={() => {}}
dropdownRender={menu => {
return (
<>
{menu}
<Button
style={{margin: 0}}
type="link"
onMouseDown={e => e.preventDefault()}
onClick={e => {
console.info("e: ", e);
}}
>
+ New Value
</Button>
</>
);
}}
>
{catalogue?.map(data => (
<Option key={data.value} value={data.value}>
{data.name}
</Option>
))}
</Select>
</Form.Item>
);
}}
</Form.Item>
<Button onClick={() => remove(name)} type="text" className="label_labels_del_btn">
<CloseOutlined />
</Button>
</Space>
);
})}
</Col>
<Col style={{flex: 1}}>
<Form.Item>
{/* add({}, 0) 新增在顶部; add() 新增在底部 */}
<Button type="dashed" onClick={() => add({}, 0)}>
+ Add
</Button>
</Form.Item>
</Col>
</Row>
);
}}
</Form.List>
</Form>
-
antd table expand 一次只展开一条
const onTableRowExpand = (expanded: any, record: any) => { const keys = []; if (expanded) { keys.push(record.restaurant_id); } initDefaultExpandRestaurant(keys); }; <Table rowKey={record => `${record.restaurant_id}`} columns={columns} dataSource={restaurantCommonStocksList} pagination={false} expandable={{ defaultExpandedRowKeys: defaultExpandRestaurant, expandedRowKeys: defaultExpandRestaurant, expandedRowRender: (record: SearchRestaurantCommonStockAJAXResponse$RestaurantCommonStock) => <ExpandedRowRender dataSource={record.items} currRestaurantId={record.restaurant_id} />, onExpand: (expanded, record) => { onTableRowExpand(expanded, record); }, expandIcon: ({expanded, onExpand, record}) => { if (record.items.length > 0) { return <LegacyIcon style={{fontSize: "18px"}} type={expanded ? "up" : "down"} onClick={e => onExpand(record, e)} />; } }, }} /> -
BaseForm中的表单使用
实例化获取表单值： const [form] = useForm(); const formRef = useRef<FormInstance<any>>(); const values = formRef.current?.getFieldsValue(); <FormBase getFormRef={formRef} formList={formList} onClear={onClear} onFinish={onSearch} /> 非实例化获取表单值： const onSearch = (values: any) => { console.info(values); }) -
antd form 3.18.1
import Form, { WrappedFormUtils } from "antd/lib/form/Form"; form: WrappedFormUtils, form: {getFieldDecorator, resetFields, validateFields}, -
form的validator验证 返回信息：将callback改成 Promise.reject
例： validator: (data, value, callback) => { if(value<10){ return Promise.reject("Count cannot less than 0"); } return Promise.resolve(); }解决下图console中抛出的问题：
-
用div替换p标签，用作表格action列的按钮容器
例： <div className="vendor_list_action"> <Button type="link"> Edit </Button> <Divider type="vertical" /> <Button type="link"> Delete </Button> </div>解决下图console中抛出的问题：
-
Table组件，需要把
rowKey字段加上antd的Table 中的rowKey要写，并且要是唯一值，否则会出现奇奇怪怪的问题
