相关疑难解决方法(0)

我正在尝试使用位于<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组件中有一个表单，在调用它的外部组件中，我想向那里的按钮传递引用，以便我也可以使用该按钮提交该表单。

为了更清楚一点，我有以下内容：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {
  render() {
    return (
      <form onSubmit={alert('Form submitted!')}>
        <button type='submit'>Inside Custom</button>
      </form>
    );
  }
}

function App() {
  return (
    <div>
      <CustomForm />
      <button>In Root</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现在，我可以使用标题为“ Inside Custom”的按钮提交表单，但是我也希望能够使用位于根组件中的标题为“ In Root”的按钮提交表单。有没有办法将引用从该按钮传递到该自定义组件，并在In Root单击按钮时实际提交表单？

I am using react hooks and useRef to call a child method from the parent (see here: Call child method from parent)

Specifically, I am trying to call the formik submitForm method which is located in my child component from my parent component. I know there are other ways to do this (React Formik use submitForm outside <Formik />) but i would really like to use useRef.

const Auth1 = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => …

我的 ReactJS App - CodeSandBox 链接中有以下结构。我试图通过使用 Bootstrap 模式窗口的按钮以某种方式提交 Formik 表单，但是我无法理解如何从树下的 2 个组件调用表单提交并将功能组合在一起。

有人可以建议这是否可以实现吗？

谢谢！