您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

表单细分后(react-formio)如何重置表单并启用提交按钮?

表单细分后(react-formio)如何重置表单并启用提交按钮?

您可以尝试使用组件的 属性<Form />

根据文档

提交数据以填写表格。您可以加载先前的提交,也可以使用一些预填充的数据创建提交。如果您不提供提交,则表单将使用表单中的认值初始化一个空提交。

因此,在这种情况下,您可以控制父组件中的组件。

submissionData是父组件的状态,组件使用父组件的状态进行初始化(最初为空值)。

<Form submission={{ data: submissionData }} />

现在,在onSubmit处理程序内部,您可以尝试重置状态并强制重新渲染。

    onSubmit={() => {
         // Reset submission data
          setSubmissionData({});
        };
      }

完整的代码如下所示。

export default () => {
  const [submissionData, setSubmissionData] = useState({});
  return (
    <Form
      //all form props
      submission={{ data: submissionData }}
      onSubmit={() => {
        var promise1 = new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve("foo");
          }, 300);
        });

        promise1.then(function(value) {
          alert(value);
         // Reset submission data
          setSubmissionData({});
        });
      }}
    />
  }

附加的codesand@R_324_2419@链接作为注释。

其他 2022/1/1 18:15:14 有570人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶