React Formik将外部按钮单击与< Formik>中的onSubmit函数绑定. [英] React Formik bind the external button click with onSubmit function in <Formik>

问题描述

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

I'm trying to submit the form by using the external buttons which are located outside of <Form> or <Formik> tags

如以下屏幕截图所示，我的按钮在Bootstrap> Modal Footer部分中，并且它们在form标签之外.当用户单击Submit按钮时，我正在尝试提交表单.

As shown in the following screenshot, my button is in Bootstrap > Modal Footer section and they are outside of form tag. I'm trying to submit the form when the user clicks on the Submit button.

请参见以下类似代码.我将其上传到 CodeSandbox .

Please see the similar code as the following. I uploaded it onto 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方法.如果我将该按钮移到了表单标签中，则它可以按预期工作，并且我不需要做任何特别的事情.

Since the button is outside of the form, it doesn't trigger Submit behaviour and I don't know how to connect this button's action and Formik OnSubmit method. If I moved that button inside form tag, it works as expected and I don't have to do anything special.

我试图遵循此SO的帖子在Forma外部使用Formik使用SubmitForm .但是我真的不知道它是如何工作的.

I tried to follow this SO's post React Formik use submitForm outside . But I really couldn't figure out how it works.

我试图绑定如onClick={() => this.props.onSubmit}所示的按钮单击操作.但是它什么也没做或没有显示任何错误.

I tried to bind the button click action like onClick={() => this.props.onSubmit} as mentioned in the post. But it's not doing anything or showing any error.

您能帮助我如何在Formik中使用"OnSubmit"功能将表单外部的提交"按钮绑定吗?

Could you please help me how I can bind the Submit button outside of the form with 'OnSubmit' function in Formik?

推荐答案

似乎您可以访问submitForm方法作为传递给render函数的参数的属性.只需使用button的onClick处理程序进行调用即可...

It appears you have access to the submitForm method as a property of the argument passed to the render function. Simply call that with the button's onClick handler...

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

这篇关于React Formik将外部按钮单击与< Formik>中的onSubmit函数绑定.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！