关于react.js:antd的Form表单的回显

9次阅读

共计 1070 个字符，预计需要花费 3 分钟才能阅读完成。

最近刚开始用 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;
   }

正文完