IT技术 - React Formik 在 <Formik> 中使用 onSubmit 函数绑定外部按钮点击 - 吾爱随笔录

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

IT技术 reactjs submit formik

2021-05-07 10:35:57

我正在尝试使用位于<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”功能绑定表单外的“提交”按钮？

4个回答

看来您可以访问该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>
    );
}}

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

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

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

https://codesandbox.io/s/qz2jnlp929

只需onClick={handlesubmit}在您的外部 Button 组件中使用，确保从 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>

其它你可能感兴趣的问题

上一篇是否可以将 Harmony (ES6) 与 JSXTransformer.js 一起使用？下一篇如何使用 Material-UI 将排版主题默认应用于常规标签？