javascript - 如何在 react 中监听按钮点击事件？

Question

我正在使用下面的包在 react 中动态生成表单:

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

我发现一个示例，其中单击按钮时，正在监听一个事件 https://jsfiddle.net/Formio/obhgrrd8/?utm_source=website&utm_medium=embed&utm_campaign=obhgrrd8

我想使用上面的包在 react 中做同样的事情 这是我的代码

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

我有三个按钮，我想监听按钮点击事件

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

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

Answer 1

在这种情况下，您需要从按钮模式中选择一个事件作为操作。

并给出事件名称(例如eventFromButton1)。

在<Form />中组件，添加onCustomEvent Prop 。

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

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

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

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

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

用途submission数据作为 react state .

更改 onCustomEvent 的状态并重新呈现表单。

    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;

尽管形式上存在一些问题。

您会看到用户界面闪烁。

验证错误将会消失(看起来提交按钮仍然处于禁用状态)

试试这个 Sandbox

您也可以尝试使用文档中提到的 redux。