React Hooks-----------Form中有自定义组件后getFieldsValue onFinish获取数据undefined

最新推荐文章于 2024-11-16 21:52:49 发布

Caiyun6666

最新推荐文章于 2024-11-16 21:52:49 发布

阅读量3.3k

点赞数 1

分类专栏： react hook 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_48718857/article/details/112285656

版权

react hook 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在React中使用自定义组件与Form组件配合时遇到的问题，即自定义组件的值无法在表单提交时获取。通过分析，发现React Hooks创建的函数式组件不直接与Form组件联动。解决方案是利用useState记录组件内部值，并在值改变时通过onChange传递给父组件，从而确保值被纳入表单数据。文章还提供了具体的代码示例来展示如何实现这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已知

对于自定义或第三方的表单控件，也可以与 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表单联系起来
所以应该用一下方法解决

将子组件下拉框的值通过onChange记录

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

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

检测到选项变化后，通过onChange 方法传递给父组件(父组件不需要收，就已自动到form的values里)

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

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

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