技術標籤：react hookreact

已知

對於自定義或第三方的表單控制元件，也可以與 Form 元件一起使用。只要該元件遵循以下的約定：

（1）提供受控屬性 value 或其它與 valuePropName 的值同名的屬性。

（2）提供 onChange 事件或 trigger 的值同名的事件。

（3）不能是函式式元件。

問題

但是React Hooks就是函式式元件，在進行表單提交時自定義元件中的值就不能被獲取。如下圖全為undefined

用法

父元件

  const [form] = Form.useForm();
  const { validateFields, getFieldsValue,
 
 setFieldsValue } = form;
   
    const checkDeploy = async () => {
    const values = await getFieldsValue();
    console.log(values, "表單的資料");
  };

 <Form layout="vertical" title="部署設定" form={form}>

<Button
          onClick={checkDeploy}
          htmlType=
 
"submit"
          style={{ position: "fixed", bottom: "50px", right: "150px" }}
          type={"primary"}
        >
          確認部署
        </Button>

子元件

 <Select
        optionFilterProp="label"
        showSearch
        defaultValue=
 
{datamodel[0].id}
        onChange={handleChange}
        options={map(datamodel, (item) => {
          return {
            value: item.id,
            label: item.name,
          };
        })}
      />

問題解決

上述用法沒有任何問題，但自定義元件的值並沒有和form表單聯絡起來
所以應該用一下方法解決

1. 將子元件下拉框的值通過onChange記錄

const [versionId, setVersionId] = useState<number>(0);

  const handleChange = (value: any) => {
    setVersionId(value);
  };

2. 檢測到選項變化後，通過onChange 方法傳遞給父元件(父元件不需要收，就已自動到form的values裡)

 const DeploySelect = ({ onChange }: { onChange?: (val: number) => void }) => {}

 useEffect(() => {
    onChange && versionId && onChange(versionId);
  }, [versionId]);

onFinish方法失效也是同樣的原因，參考以上方式即可。