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 的 post 。但是我真的不知道它是如何工作的。

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

能否请您帮助我如何在 Formik 中使用 'OnSubmit' 函数绑定表单外的提交按钮？

Answer 1

这是因为从未调用 handleSubmit 函数，将 onClick={() => this.props.onSubmit} 替换为 onClick={props.handleSubmit}

编辑：因为看起来你需要更多的指导，这里是链接代码沙箱的编辑版本，正确的道具是 handleSubmit 你需要像你一样从道具中解构它做了价值观。

https://codesandbox.io/s/qz2jnlp929

Answer 2

您似乎可以访问 submitForm 方法作为传递给 render 函数的参数的属性。只需使用 button 的 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>
    );
}}

Answer 3

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

Answer 4

只需在外部 Button 组件中使用 onClick={handlesubmit}，确保从 Formik 组件中解构 handlesubmit 函数。请看看;

<Formik
initialValues={{field: true}}
onSubmit={() => console("Submited via my onSubmit function")}
>

{({ handleSubmit }) => (

  <Form>
          <Field
            name="field"
            placeholder="Date"
          />
  </Form>

  <Button type="submit" onClick={handleSubmit}>
    Save
  </Button>

</Formik>

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

React Formik bind the external button click with onSubmit function in <Formik>

submit

reactjs

formik