最近在做公司项目，好久都没有使用过antdesign 的 form 组件了，上次使用还是，antd3.x的版本的form，只记得是通过Form.create()高阶函数给所编写的组件传递了form对象，该对象身上拥有获取字段值，重置字段值以及 valieate 表单等一些列的form方法。这次，公司的antd的版本升级到了4.x,又有关于表单的需求，于是打开文档一看，发现一切好像都变了，但仔细看下来发现，文档已经在积极拥抱react hooks 了，如果你是在class 组件中使用的话，要仔细去看一下，文档中关于class组件的处理方法。最关键的就是 form 的获取方式，之前是通过Form.create 来传递的，现在需要自己使用ref来绑定form从而获得改form对象，以及操作方法，废话不多说，看代码就知道了
import React, { Component } from 'react';
import style from './manage.scss';
import Cns from 'classnames';
import {isNotEmpty, overtopOmit} from 'utils/formatter';
import {OtherNameCheck} from 'utils/validator';
import { Form, Input} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const { TextArea } = Input;
class AtomTable extends Component {
constructor(props){
super(props);
this.state = {
disable: false
};
}
formRef = React.createRef(); // 重点
editModal=(record)=>{
this.setState({
visible: true,
type: 'editor',
id: record.id
});
setTimeout(() => {
this.formRef.current.setFieldsValue({ // 数据回显
keyWord: record.keyWord,
labelName: record.labelName
});
}, 200);
}
onCheck = async () => {
try {
const values = await this.formRef.current.validateFields();
let params = {
keyWord: values.keyWord,
labelName: values.labelName
};
if(this.state.type === 'add'){
this.setState({
disable: true
});
addLabel(params).then(
(p, index)=>{
message.success('新增成功');
this.handleCancel();
this.upData();
this.formRef.current.setFieldsValue({
keyWord: '',
labelName: ''
});
this.setState({
disable: false
});
}
).catch(
(err)=>{
this.setState({
disable: false
});
}
);
}else{
editorLabel(Object.assign({id: this.state.id}, params)).then(
(p, index)=>{
message.success('编辑成功');
this.formRef.current.setFieldsValue({
keyWord: '',
labelName: ''
});
this.setState({
disable: false
});
this.handleCancel();
this.upData();
}
).catch(
(err)=>{
this.setState({
disable: false
});
}
);
}
} catch (errorInfo) {
// console.log('Failed:', errorInfo);
}
};
componentWillUnmount() {
this.setState = (state, callback) => {
return;
};
}
// 自定义校验， Promise 取代 try catch
kuoValidator=(rule, value )=>{
let str = value.match(/[()]/g, '');
let flag = true;
if(str){
str = str.join('');
}
if(isNotEmpty(str)){
flag = str.indexOf('((') === -1 && str.indexOf('))') === -1;
}
if (flag) {
return Promise.resolve();
}else{
return Promise.reject('不支持多重括号');
}
}
render() {
const {fileList, uploading, value, total, visible1, visible, fileType, selectedRowKeys, dataSource, currentPage, pageSize, loading, disable } = this.state
// 格式
const layout = {
labelCol: {
span: 4
},
wrapperCol: {
span: 16
}
};
const formTailLayout = {
wrapperCol: {
offset: 8,
span: 16
}
};
const fileName = fileType === 'all' ? '原子标签体系-全量导入.csv' : '原子标签体系-单个导入.csv';
return (
<div className={Cns('labelBox')} >
<Modal
width={892}
title={'原子标签编辑'}
visible={visible}
onCancel={this.handleCancel}
className={Cns('globalModal', style.del)}
footer={null}
>
<div className={style.editCotent}>
<Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
<Form.Item
name="labelName"
label="原子标签名称"
rules={[
{
required: true, message: '请输入原子标签名称'
},
OtherNameCheck('原子标签名称', 1, 20)，
, { validator: this.kuoValidator, message: '不支持多重括号'}
]}
// validateTrigger= "onSubmit" // 设置进行表单验证的时机为onSubmit
>
<Input />
</Form.Item>
<Form.Item
name="keyWord"
label="包含关键词:"
rules={[
{
required: true, message: '请输入关键词'
}
]}
>
<TextArea
value={value}
placeholder="关键词用英文逗号“,”或中文逗号“，”分割"
autoSize={{ minRows: 3, maxRows: 5 }}
maxLength={200}
/>
</Form.Item>
<Form.Item {...formTailLayout}>
<Button type="primary" onClick={this.onCheck} disabled={disable} >
保存
</Button>
   
<Button type="primary" onClick={this.handleCancel}>
取消
</Button>
</Form.Item>
</Form>
</div>
</Modal>
</div>
);
}
}
export default AtomTable;
代码案例是我从网上copy的，最关键的代码都有体现，其实文档中也讲得很明白，只是我一开始没看到，哈哈～
