表单提交后如何重置表单并启用提交按钮(react-formio)? [英] how to reset the form and enable submit button after form submision (react-formio)?

问题描述

我正在使用 还有一件事

我还添加了一个按钮

<代码>{标签:点击"，动作:事件"，显示验证:假，块:真实，键:点击"，类型:按钮"，输入:真实，事件:点击事件"},

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

clickEvent={() =>{警报(--ss")；}}

解决方案

您可以尝试使用

组件的 submission 属性.

根据文档..

<块引用>

提交数据以填写表格.您可以加载以前的提交或使用一些预填充数据创建提交.如果你这样做不提供提交表单将初始化一个空提交使用表单中的默认值.

因此在这种情况下，您可以在父组件中控制组件.

这里的 submissionData 是一个父组件状态，组件用父组件的状态初始化(最初为空值).

<表单提交={{数据:提交数据}}/>

现在，在 onSubmit 处理程序中，您可以尝试重置状态并强制重新渲染.

 onSubmit={() =>{//重置提交数据setSubmissionData({});};}

完整的代码如下所示.

export default () =>{const [submissionData, setSubmissionData] = useState({});返回 (<表格//所有表单道具提交={{数据:提交数据}}onSubmit={() =>{var promise1 = new Promise(function(resolve, reject) {设置超时(函数(){解决(富")；}, 300);});promise1.then(函数(值){警报(值)；//重置提交数据setSubmissionData({});});}}/>}

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

I am using the react-formio package to generate a form dynamically.

I have generated a simple login-form using this link: https://codesandbox.io/s/cra-react-formio-iy8lz

After building, it creates a JSON. Then, I generate a form using that JSON, but when I submit by form after fulfill all validation of form it always is shown in disable mode why?

How can we enable button again ?? when my promise is resolved and how to reset the form after submitting it?

here is my code, codesandbox link

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

one more thing

I also added one more button

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

I also added click handler but it is not working

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

解决方案

You can try to use the submission property of the <Form /> component.

As per docs..

Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.

So in this case you can control the component in a parent component.

Here submissionData is a parent component state and the component initializes with the state from parent (Empty values initially).

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

Now, inside the onSubmit handler you can try to reset the state and force a re-render.

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

Complete code would look like below.

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({});
        });
      }}
    />
  }

Attached codesandbox link as comment.

这篇关于表单提交后如何重置表单并启用提交按钮(react-formio)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！