技術標籤：React

場景:

Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop

官方解釋: 這是因為你在呼叫 form 方法時，Modal 還未初始化導致 form 沒有關聯任何 Form 元件

Form包裹在Modal中:

如果你的Form表單是包裹在Modal對話方塊中, 官方解決辦法是:通過給 Modal 設定forceRender將其預渲染。示例點選此處。

hooks函式元件:

我遇到的錯誤程式碼來自react hooks, 所以本文重點分解hooks程式碼.

錯誤程式碼(全網都是這麼用的, 不知道為什麼大家沒有錯誤):

// 錯誤用法
import React, { useRef } from 'react';
import { Form } from 'antd';

const FormComp = () => {
  const [form] = Form.useForm();
  
  const onValuesChange = (val) => {
      //form.setFieldsValue, form.resetFields等等都會報錯
      form.setFieldsValue({val}) // 控制檯報錯: Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
  };

  return (
      <Form>
        <Form.Item><Input /></Form.Item>
      </Form>
  );
};
export default FormComp;
 

正確程式碼:

// 正確用法
import React, { useRef } from 'react';
import { Form } from 'antd';

const FormComp = () => {
  const formEl = useRef(null);
  
  const onValuesChange = (values: any) => {
      formEl.current.setFieldsValue({val})); // success
  };

  return (
      <Form ref={formEl}>
        <Form.Item><Input /></Form.Item>
      </Form>
  );
};
export default FormComp;
 

class類元件:

參考:react antd 設定Form表單值 / 清空Form表單 Form.useForm 報錯