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處理程序啟動相同的邏輯。