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>}
          />