antd的Form表单的回显
Posted HappyCodingTop
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了antd的Form表单的回显相关的知识，希望对你有一定的参考价值。
最近刚开始用antd，回显网上搜了一圈，都不太清晰。所以保存一下我的用法。
1 利用initialValue
render() {
// @ts-ignore
const {location} = this.props;
const data = location.state;
let responsiblePeoplePhone = {};
if(data){
responsiblePeoplePhone={initialValue:data.responsiblePeoplePhone||\'\'};
}
return( <FormItem
{...formItemLayout}
label="负责人联系方式"
required={true}
hasFeedback={true}
name="responsiblePeoplePhone"
{...responsiblePeoplePhone}
rules={[
{
required: true,
message: \'请填写负责人联系方式\',
},
{
pattern: ValidConst.phone,
message: \'请输入正确的负责人联系方式\',
},
]}
>
<Input />
</FormItem>
)2 使用setFieldsValue
render() {
// @ts-ignore
const {location} = this.props;
const data = location.state;
// ref form
this.formRef.current.setFieldsValue({
responsiblePeoplePhone: data.responsiblePeoplePhone
})
return( <FormItem
{...formItemLayout}
label="负责人联系方式"
required={true}
hasFeedback={true}
name="responsiblePeoplePhone"
rules={[
{
required: true,
message: \'请填写负责人联系方式\',
},
{
pattern: ValidConst.phone,
message: \'请输入正确的负责人联系方式\',
},
]}
>
<Input />
</FormItem>
)
getData()
{ 获取输入值
const fieldsValue = this.formRef.current.getFieldsValue();
let result = {
responsiblePeoplePhone:
fieldsValue.responsiblePeoplePhone ,
};
return result;
}
单行编辑操作
<Column
title="操作"
key="action"
dataIndex="action"
render={(_text,record: any) => <a onClick={()=>remindEdit(record)}>{isOpen?\'停用\':\'启用\'}</ a>}
/>以上是关于antd的Form表单的回显的主要内容，如果未能解决你的问题，请参考以下文章