reactjs - React Formik 使用 中的 onSubmit 函数绑定(bind)外部按钮点击

Question

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

如下面的屏幕截图所示，我的按钮位于 Bootstrap > 模态页 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 。但我真的不明白它是如何工作的。

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

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

Answer 1

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