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

Question

我的 Input 当前位于<Form>和Form.Item中。
我只想在验证成功时触发回调，所以回调不会运行验证失败。
有没有办法做到这一点？

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

参考：

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

Answer 1

您可以通过将Form组件的onValuesChange事件处理程序与useRef和form.validateFields实例方法结合使用来实现此行为。 useRef用于跟踪url字段之前的验证状态。

回调，如以下示例中当前设置的那样，仅当字段从错误验证 state 转换为成功验证 state 时才会启动（我假设这是您想要的行为）。

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

快乐编码！

PS 如果url Form.Item组件也可以访问form实例，那么您也应该能够使用Input组件的onChange处理程序启动相同的逻辑。