как прослушать событие нажатия кнопки в реакции? - PullRequest
Новая
       21

как прослушать событие нажатия кнопки в реакции?

0 голосов
/ 04 ноября 2019

Я использую приведенный ниже пакет для динамического создания формы в реакции:

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

Я нашел один пример, где on button click, an event is listening https://jsfiddle.net/Formio/obhgrrd8/?utm_source=website&utm_medium=embed&utm_campaign=obhgrrd8

Iхочу сделать то же самое в react, используя приведенный выше пакет, вот мой код

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

У меня есть три кнопки, которые я хочу слушать 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
);

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

В этом случае вам нужно выбрать событие как действие из модальной кнопки.

enter image description here

и дать имя события (скажем, eventFromButton1 ).

enter image description here

А в компоненте <Form /> добавьте onCustomEvent prop. 

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

Функция onCustomEvent получит объект prop со следующей структурой 

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

. Вы можете использовать свойство type, чтобы определить, какая кнопка инициировала обновление, и использовать свойство data, чтобы получить данные формы.

Попытка изменить данные формы с помощью кнопки, добавленной ниже (я не вижу хорошей документации по этим настройкам в react-formio)

Использует submission данные в качестве реакции 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;

Хотя в форме есть некоторые глюки.

Вы увидитемерцание в пользовательском интерфейсе.

Ошибки проверки исчезли бы (похоже, кнопка отправки все еще отключена)

Попробуйте это Песочница

Также вы можете попробовать использовать redux, как указано в документации.

0 голосов
/ 04 ноября 2019

реакция в конце создает код JavaScript. Таким образом, вы можете использовать события, подобные javascript, в реакции.

Например, 

const submit = ()=>{
//your work goes here
}

return (
<div onClick={submit}> // or onClick={ ()=>submit()}

</div>
)
...