via，通过React提交表单

Question

我有一个用functional包装的React表单，我希望提交这个表单，并让组件处理它的onSubmit事件。

但是，我不知道如何组合useRef、createRef或forwardRef来适当地调用表单上的submit：

LoginForm.js

const LoginForm = (props) => {
    const onSubmit = (e) => {
        e.preventDefault()
    }

  return (
    <Form onSubmit={onSubmit} className="form-custom-margin">
      //...
    </Form>
  )
}

export default LoginForm;

MyModal.js

const Modal = (props) => {

  // trying to figure out how to establish a ref?

  const handleActionClick(e){
   // want to call LoginForm and "submit" the form and have `onSubmit` method run
  }

  return (
   <Modal>
     <Modal.Body>
      <LoginForm />
     <Modal.Body>
     <Modal.Footer>
      <Button variant="primary" onClick={handleActionClick}>Login</Button>
     </Modal.Footer>
   </Modal>
  )
}

Answer 1

我会这样做，利用html5中的form属性

在表格上：

import React from "react";

import { Form } from "react-bootstrap";

export default function LoginForm({ handleSubmit }) {
  return (
   // Remember to pass an id that will be referenced on the submit button
    <Form onSubmit={handleSubmit} id="myForm">
      { /* Your Form JSX */}
    </Form>
  );
}

既然您已经为表单分配了一个id，并且正在接受一个onSubmit函数作为支柱，那么就可以这样做了：

import React from "react";
import { Button, Modal } from "react-bootstrap";
import FormExample from "./Form";

export default function ModalExample() {
  const [show, setShow] = React.useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  // Pass this callback to the LoginForm
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form was submitted, now the modal can be closed");
    handleClose();
  };

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Body>
          <LoginForm handleSubmit={handleSubmit} />
        </Modal.Body>
        <Modal.Footer>
         {/* Here the form attribute is referencing the form with the id myForm which is the LoginForm */}
          <Button variant="primary" type="submit" form="myForm">
            Login
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

这里最重要的部分是，我们正在为表单的onSubmit处理程序创建一个回调，我们将传递一个道具。其次，注意模态页脚有一个带有表单属性的按钮，在本例中它将引用表单组件中添加的表单id属性。

下面是一个快速的沙箱，以防您想要看到它的作用：https://codesandbox.io/s/nervous-banzai-oockb