ant.design 的 Pro Component 的 ProTable 清除表单内容的方法

ant.design 的 Pro Component 的 ProTable 清除表单内容的方法

我们用 ProTable 进行一个表单的呈现，只需要在属性上进行一个 type = {“form”} 的属性即可，用到表单的时候肯定需要对表单的数据进行提取，以及当数据提交的完的时候我们要进行清空原来的数据。

使用示例（不能清除表单中的数据）：

首先需要知道的是，我们想要拿到在表单中的数据，只要在 onSubmit 事件定义一个参数，组件就会自动把表单的值传递过来，代码中的 record 就可以拿到所有的值。一开始我想直接把 record 的值赋值为 {} 不就可以使表单的值为空了吗，没想不行。

然后想另外一个办法，就是通过 ProTable 的 actionRef 属性，定义一个属性绑定 actionRef 属性 ，通过调用 actionRef.current.reload() 函数来使得组件重新加载，结果还是不行

再次搜索，通过 actionRef.current.reloadAndRest() 但是好像这个函数在这个框架里面就用不了，很离谱。

最后搜索检索到可以通过 formRef 设置属性的值，好像找到办法了，formRef.current.setFieldsValue({}) 再去试一试，好的还是不行。

// formRef 需要定义属性，与 ProTable 的 formRef 进行绑定
const formRef = useRef();
<ProTable
    type={"form"}
    formRef={formRef}
    columns={columns}
    onSubmit={(record)=>{
      console.log(record);
      props.handleModalOpen(false);
      message.success("成功递交");
      console.log("heloo",formRef.current)
      formRef.current.setFieldsValue({})
    }}
    ></ProTable>

最后在 ant.design github 开源的网页上的 issue 里面找到提示说在 setFieldsValue() 的时候要把所有的键值对加上去才有效。

成功的代码：

 <ProTable
    type={"form"}
    formRef={formRef}
    columns={columns}
    onSubmit={(record)=>{
      console.log(record);
      props.handleModalOpen(false);
      message.success("成功递交");
      console.log("heloo",formRef.current)
      formRef.current.setFieldsValue({
        description: "",
        method : "",
        name: "" ,
        requestHeader : "",
        responseHeader : "" ,
        status : "",
        url : "" ,
              })
    }}
    ></ProTable>

启发

如果用某个开源框架的时候，又遇到问题不好解决，或许可以去它的开源仓库看看，去 issues 里面看看，或许能够找到答案。