当Form.Item已在antd中验证时，我如何提供回调

Question

My 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字段以前的验证状态。

正如下面示例中当前设置的那样，回调只有在字段从错误验证状态转换为成功验证状态时才会启动(我认为这是您想要的行为(。

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

编码快乐！

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