2

我正在使用react-formio包动态生成表单。

我使用此链接生成了一个简单的登录表单：https ://codesandbox.io/s/cra-react-formio-iy8lz

构建后，它会创建一个 JSON。然后，我使用该 JSON 生成一个表单，但是当我通过表单提交后fulfill all validation of form它总是显示disable mode为什么？

我们如何再次启用按钮？什么时候我promise is resolved以及如何在提交后重置表单？

这是我的代码，codesandbox 链接

onSubmit={i => {
  alert(JSON.stringify(i.data));
  var promise1 = new Promise(function(resolve, reject) {
     setTimeout(function() {
        resolve("foo");
      }, 300);
   });
 }

在此处输入图像描述 还有一件事

我还添加了one more button

{
   label: "Click",
   action: "event",
   showValidations: false,
   block: true,
   key: "click",
   type: "button",
   input: true,
   event: "clickEvent"
},

我还添加了点击处理程序，但它不起作用

clickEvent={() => {
  alert("--ss");
}}
4

1 回答 1

0

您可以尝试使用组件的提交属性<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({});
        });
      }}
    />
  }

附加代码和框链接作为评论。

于 2019-11-04T15:23:03.590 回答