React Final Form 如何在模态按钮中传递表单值？

Question

我将我的表单从 Redux-form 迁移到 react-final-form，除特殊情况外一切顺利。我有一个带有值的表单，当你想保存它时，会打开一个带有两个按钮的模式，一个用于提交表单，另一个用于发送带有表单值的 OTP。

我已遵循文档 How can I trigger a submit from outside my form? 解决方案通过闭包。

但是当我想为函数获取表单值时，我得到了未定义。我解决了这里所有的问题，但似乎没有什么适合我的问题。

这里是我例子的一部分：

<Form
    subscription={{ submitting: true, pristine: true }}
    destroyOnUmount={false}
    enableReinitialize={false}
    forceUnregisterOnUnmount={false}
    keepDirtyOnReinitialize
    onSubmit={onSubmit}
    initialValues={initialValues}
    FormState
    render={({
      handleSubmit, values, submitting
    }) => {
      submit = handleSubmit;
      return (
        <form onSubmit={handleSubmit} className="edit-device-section">
          ...
          ...
          ...
          ...
          <Modal
            show={showModal}
            onHide={handleClose}
            backdrop="static"
            centered
            keyboard={false}
            className="device-modal"
          >
          ...
          ...
          ...
          ...


     

<Button
                          variant="primary"
                          className="btn-raised otp-btn"
                          onClick={() => sendSmsOtp(values, 'otp')}
                          disabled={submitting}
                        >
                          {f({ id: 'button.smsOtp' })}
                        </Button>
                      )}
                      <Button
                        variant="primary"
                        className="btn-raised execute-btn"
                        type="submit"
                        onClick={(event) => {
                          submit(event);
                        }}
                        disabled={submitting}
                      >
                        {f({ id: 'button.execute' })}
                      </Button>

对我应该做什么有什么想法吗？

Answer 1

经过大量研究，我终于找到了解决方案。要访问您的表单值，需要在 render 中传递 form: {getState}。

<Form
    subscription={{ submitting: true, pristine: true }}
    destroyOnUmount={false}
    enableReinitialize={false}
    forceUnregisterOnUnmount={false}
    keepDirtyOnReinitialize
    onSubmit={onSubmit}
    initialValues={initialValues}
    FormState
    render={({
      handleSubmit, values, submitting, form: { getState }
    }) => {

并传递 getState().values to your function:

<Button
  onClick={() => functionName(getState().values)}
>

React Final Form 如何在模态按钮中传递表单值？

React Final Form How to pass form values in a modal button?

reactjs

react-final-form