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

Question

我正在尝试使用位于<Form>或<Formik>标签之外的外部按钮提交表单

如以下屏幕截图所示，我的按钮位于 Bootstrap > Modal Footer 部分，它们位于表单标记之外。当用户单击Submit按钮时，我试图提交表单。

请参阅如下类似的代码。我将它上传到CodeSandbox。

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 use submitForm outside。但我真的无法弄清楚它是如何工作的。

我试图像onClick={() => this.props.onSubmit}帖子中提到的那样绑定按钮点击动作。但它没有做任何事情或显示任何错误。

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

Answer 1

看来您可以访问该submitForm方法作为传递给render函数的参数的属性。只需使用button'sonClick处理程序调用它...

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>
    );
}}

Answer 2

Formik 的渲染给你一个回调参数handleSubmit。将其分配给<button.

由于您的button不在表单中，请将其类型更改为<button type="button"...并将 onClick 分配给onClick={handleSubmit}

更新渲染如下，

render={({ values, handleSubmit }) => {
  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="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}