从父组件提交表单

Question

我想创建一个表单，其中提交按钮位于标题中。我目前正在使用react-hook-forms，但无法从显示表单（或子项）的布局中的组件提交表单。我添加了一张图像，可以帮助您直观地了解我正在谈论的内容。

有没有办法可以将表单数据或handleSubmit从react-hook-form传递到标头，然后在单击时运行onSubmit？

Answer 1

只需在父组件中创建一个引用，将其发送到子组件并将该引用分配给一个不可见的提交按钮。

最后，在父提交按钮的onClick事件中，只需调用submitRef.current.click()

// ./From.js
import React from 'react';
import { useForm } from 'react-hook-form';

// This is the child component with a ref received from the parent
// and assigned to an invisible submit button 
const Form = ({ submitRef }) => {
  const {register, setValue, getValues, ...other } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
      <button ref={submitRef} type="submit" style={{ display: 'none' }} />
    </form>
  );  
}; 


export default Form;

// ./Parent.js
import React, { useRef } from 'react';
import Form from './Form'
 
const Parent = () => {
  const submitRef = useRef();

  return (
    <>
      <button onClick={() => submitRef.current.click()}>Submit</button>
      <Form submitRef={submitRef}/>
    </>
  );  
}; 
export default Parent;

Answer 2

您可以在表单上设置引用：

<form ref={formRef} onSubmit={handleSubmit}>

然后从任何地方模拟 onSubmit：

formRef.current.requestSubmit();

这相当于单击提交按钮，而不插入不必要的提交按钮：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit

Answer 3

您可能想研究 redux 形式和/或connect()

例子：

import React from 'react';
import { useForm } from 'react-hook-form';
import { connect } from 'react-redux';
 
const Form = ({ register, handleSubmit }) => {
  const methods = useForm();

  return (
    <form onSubmit={handleSubmit(register)}>...</form>
  );  
}; 

const mapDispatchToProps = dispatch => ({
  register: (data) => dispatch(register(data))
});
 
export default connect(null, mapDispatchToProps)(Form);

import React from 'react';
import { useForm } from 'react-hook-form';
import { connect } from 'react-redux';
 
const Form = ({ register, handleSubmit }) => {
  const methods = useForm();

  return (
    <form onSubmit={handleSubmit(register)}>...</form>
  );  
}; 
export default connect(null, mapDispatchToProps)(Form);