Form.Item 在 antd 中经过验证后，如何提供回调？

Question

My Input currently sits within a <Form> and Form.Item .
I want to trigger a callback only when the validation has been successful, so the callback would not run validation fails.
Is there a way to do that?

<Form.Item
  hasFeedback
  name="url"
  rules={[
    {
      required: true,
      min: 5,
      type: "url",
      whitespace: true,
    },
  ]}
  onChange={console.log}
>
  <Input
    name="url"
    onChange={(event) => {
      props.onChange(event);
      setValue(event.target.value);
    }}
  />
</Form.Item>

Reference:

• https://ant.design/components/form/

Answer 1

You can achieve this behavior by using Form component's onValuesChange event handler in combination with a useRef and the form.validateFields instance method. The useRef is used to track the previous validation status of the url field.

The callback, as currently setup in the example below, will only launch when the field transitions from an error validation state to a successful validation state (which I assume is the behavior you want).

https://codesandbox.io/s/antd-launchcallbackonvalidatesuccess-pehue

Happy coding!

PS If the url Form.Item component also has access to the form instance, then you should also be able to initiate the same logic using the Input component's onChange handler.