如何在响应中监听按钮单击事件? [英] how to listen button click event in react?

问题描述

我正在使用以下程序包在react中动态生成表单:

并指定一个事件名称(例如 eventFromButton1 ).

在< Form/> 组件中，添加 onCustomEvent 属性.

 <表格表格= {{onCustomEvent = {customEvent =>{console.log(customEvent);}}/> 

onCustomEvent 函数将接收具有以下结构的prop对象

  {类型:"eventFromButton1"，成分: {}，数据: {}，事件:MouseEvent} 

您可以使用 type 属性来确定哪个按钮触发了更新，并使用 data 属性来获取表单数据.

尝试使用下面添加的按钮修改表单数据(我没有在 react-formio 中看到有关这些自定义的好的文档)

使用提交数据作为对状态的反应.

更改 onCustomEvent 上的状态，然后重新呈现表单.

  import React，{useState} from"react";从"react-formio"导入{Form}；函数CustomForm(){const [submission，setSubmission] = useState({});返回 (< div className ="App"><表格表格= {{组件: [{标签:名字"，验证:{必填:true，minLength:3}，密钥:名字"，类型:文本字段"，输入:真}，{类型:文本字段"，密钥:姓氏"，标签:姓氏"，占位符:输入您的姓氏"，输入:真}，{标签:伪造的姓氏"，动作:事件"，showValidations:否，密钥:"submit1"，类型:按钮"，输入:true，事件:"someEvent"}，{类型:按钮"，标签:提交"，关键:提交"，disableOnInvalid:true，输入:真}]}}提交= {{数据:提交}}onSubmit = {a =>{console.log(a);}}onSubmitDone = {a =>{console.log(a);}}onCustomEvent = {customEvent =>{console.log(customEvent);setSubmission({... customEvent.data，lastName:最新名称"});}}/></div>);}导出默认的CustomForm; 

尽管有一些小故障.

您会在用户界面中看到闪烁.

验证错误将消失(尽管看起来像提交"按钮仍被禁用)

尝试使用此沙盒

此外，您也可以尝试使用文档中提到的redux.

I am using the package below to generate a form dynamically in react:

https://www.npmjs.com/package/react-formio

I found one example where on button click, an event is listening https://jsfiddle.net/Formio/obhgrrd8/?utm_source=website&utm_medium=embed&utm_campaign=obhgrrd8

I want to do same thing in react using the above package here is my code

https://codesandbox.io/s/lucid-austin-vjdrj

I have three buttons I want to listen button click event

ReactDOM.render(
  <Form src="https://wzddkgsfhfvtlmv.form.io/parentform" />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);

解决方案

In this case you need to select an event as action from the button modal.

And give an event name(say eventFromButton1).

And in the <Form /> component, add onCustomEvent prop.

<Form
        form={{
        onCustomEvent={customEvent => {
          console.log(customEvent);
        }}
 />

onCustomEvent function will receive a prop object with following structure

{
 type: "eventFromButton1",
 component: {},
 data: {}, 
 event: MouseEvent
}

You can use the type property to identify which button triggered the update, and use the data property to get the form data.

An attempt to modify the form data using a button added below (I don't see good documentation on these customizations in react-formio)

Uses submission data as react state.

Alter the state on onCustomEvent and re-render the form.

    import React, { useState } from "react";
    import { Form } from "react-formio";

    function CustomForm() {
      const [submission, setSubmission] = useState({});
  return (
    <div className="App">
      <Form
        form={{
          components: [
            {
              label: "First Name",
              validate: { required: true, minLength: 3 },
              key: "firstName",
              type: "textfield",
              input: true
            },
            {
              type: "textfield",
              key: "lastName",
              label: "Last Name",
              placeholder: "Enter your last name",
              input: true
            },
            {
              label: "Pupulate Nast Name",
              action: "event",
              showValidations: false,
              key: "submit1",
              type: "button",
              input: true,
              event: "someEvent"
            },
            {
              type: "button",
              label: "Submit",
              key: "submit",
              disableOnInvalid: true,
              input: true
            }
          ]
        }}
        submission={{ data: submission }}
        onSubmit={a => {
          console.log(a);
        }}
        onSubmitDone={a => {
          console.log(a);
        }}
        onCustomEvent={customEvent => {
          console.log(customEvent);
          setSubmission({ ...customEvent.data, lastName: "Laaast Name" });
        }}
      />
    </div>
  );
 }

export default CustomForm;

There are some glitches in form though.

You would see a flicker in UI.

Validation errors would be gone(Looks like submit button is still disabled though)

Try this Sandbox

Also you can try using redux as mentioned in documentation.

这篇关于如何在响应中监听按钮单击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！