时间戳

首页 > 解决方案 > 动态组件内元素上的 createRef 为空

javascript - 动态组件内元素上的 createRef 为空

问题描述

我正在使用 antd（https://ant.design/components/form/）。我有一个Forminside aModal和 in 构造函数为表单创建了一个ref。

当我打开模式时，我试图按照以下示例重置字段：https ://codesandbox.io/s/ddtxj 。当我单击打开模式的按钮时，我调用 onReset，如示例所示。

但我明白了Uncaught TypeError: Cannot read property 'resetFields' of null。
当console.log(this.addCustomerFormRef);我看到{current: null}

我认为 ref 是 null 因为模态/表单在 DOM 中还不存在......或类似的东西。当我setTimeout对我的onReset()方法进行操作时，它会起作用。

有人可以告诉我在表单中重置字段的正确方法吗？

构造函数：

this.addCustomerFormRef = React.createRef();

打开模态的按钮：

 <Button type="primary" 
     onClick={() => { this.handleFormFieldsReset(); this.setState({ addModalVisible: true }) }}>
   Add Customer
 </Button>

重置表格方法：

handleFormFieldsReset = () => {
    setTimeout(() => {
        this.addCustomerFormRef.current.resetFields(); //works with setTimeout
    }, 2000);
}

标签： javascriptreactjsantd

解决方案

推荐阅读