React Formik 使用 中的 onSubmit 函数绑定外部按钮点击

我正在尝试使用位于外部的外部按钮提交表单<Form> or <Formik> tags

如下面的屏幕截图所示，我的按钮位于 Bootstrap > Modal Footer 部分，并且它们位于表单标签之外。我试图在用户单击时提交表单Submit button.

请参阅如下类似代码。我把它上传到代码沙箱 https://codesandbox.io/s/jlx4vq1l9w.

function App() {
      return (
        <div className="App">
          <Formik
            initialValues={{
              date: '10/03/2019',
              workoutType: "Running",
              calories: 300
            }}
            onSubmit={values => {
              console.log(values);
            }}
            render={({ values }) => {
              return (
                <React.Fragment>
                  <Form>
                    Date: <Field name="date" />
                    <br />
                    Type: <Field name="workoutType" />
                    <br />                
                    Calories: <Field name="calories" />
                    <br />  
                    <button type="submit">Submit</button>
                  </Form>
                  <hr />
                  <br />
                  <button type="submit" onClick={() => this.props.onSubmit}>
                    Button Outside Form
                  </button>
                </React.Fragment>
              );
            }}
          />
        </div>
      );
    }

由于该按钮位于表单之外，因此它不会触发提交行为，并且我不知道如何连接该按钮的操作和Formik OnSubmit方法。如果我将该按钮移到表单标签内，它就会按预期工作，我不需要做任何特别的事情。

我试图关注这个SO的帖子React Formik 在外部使用submitForm https://stackoverflow.com/questions/49525057/react-formik-use-submitform-outside-formik。但我真的不明白它是如何工作的。

我尝试绑定按钮单击操作，例如onClick={() => this.props.onSubmit}正如帖子中提到的。但它没有做任何事情或显示任何错误。

您能帮助我如何将表单外的“提交”按钮与 Formik 中的“OnSubmit”功能绑定吗？

您似乎有权访问submitForm方法作为参数的属性传递给render功能。只需用button's onClick处理程序...

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}