当我们有自定义的 antd 表单组件时，form.validateFields() 不起作用

Question

考虑到以下示例，这阻止了我们使用 antd4 版本在表单内创建自定义组件。

const handleFormSubmit = () => {
  form
    .validateFields()
    .then((values: any) => {
      console.log('success values => ', JSON.stringify(values));
      successCallback(values);
    })
    .catch((errorInfo: any) => {
      console.log('failureCallback values => ', JSON.stringify(errorInfo));
      failureCallback(errorInfo);
    });
};


<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>
  <Form.Item>
    <Input placeholder="Name" />
  </Form.Item>

  <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

这绝对可以正常工作，而如果组件是自定义的，则无法正常工作。示例：

function CustomInput(props){
  return (
    <Form.Item>
      <Input placeholder={props.name} />
    </Form.Item>
  )
}

<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>

  <CustomInput name="Name" />

将显示该字段并验证更改事件。已调用 HandleFormSubmit，但未触发成功或失败块。

  <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

这是怎么回事？

Answer 1

试试这个而不是你的自定义 JSX

function CustomInput(props){
  return (
    <Form.Item name={props.name}>  # Update this line only and remove this comment #
      <Input placeholder={props.name} />
    </Form.Item>
  )
}

<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>

  <CustomInput name="Name" /> 

<Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

NOTE: In Antd if your using Form.Item then you have to set name there not on input fields. Form.Item assign its value to its Input.

希望大家的疑惑得到解决，多多评论。我也厌倦了antd，浪费了很多天来理解这个。

当我们有自定义的 antd 表单组件时，form.validateFields() 不起作用

form.validateFields() doesnt work when we have custom antd form component

javascript

forms

validation

reactjs

antd