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

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

И дайте название событию (скажем, eventFromButton1).

И в компоненте <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, как указано в документации.

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

Например,

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

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

</div>
)