React中不同组件内的按钮如何作为表单的提交按钮使用

核心逻辑：导航栏和表单组件共享父级App，可通过父组件作为中转实现通信，完全保留原有表单验证逻辑，不需要重构现有代码。

优先方案：ref转发+父级中转（改动量最小） #

该方案不需要挪动表单状态和验证逻辑，只需要新增少量中转代码即可实现需求：

• 第一步：用forwardRef包裹AccountDetails表单组件，通过useImperativeHandle暴露表单提交触发方法给父组件

// AccountDetails.jsx
import { forwardRef, useImperativeHandle, useRef } from 'react'

const AccountDetails = forwardRef((props, ref) => {
  // 保留你原有的表单实例、验证、提交逻辑
  const formRef = useRef(null)
  const validateForm = () => {
    // 你原有表单的字段校验逻辑，返回校验是否通过的布尔值
  }
  const submitAccountInfo = () => {
    // 你原有验证通过后调用接口提交数据的逻辑
  }
  const handleFormSubmit = (e) => {
    e?.preventDefault()
    if (!validateForm()) return
    submitAccountInfo()
  }

  // 给父组件暴露触发提交的方法
  useImperativeHandle(ref, () => ({
    triggerSubmit: handleFormSubmit
  }))

  return (
    <form ref={formRef} onSubmit={handleFormSubmit}>
      {/* 原有表单内容完全不需要改动 */}
    </form>
  )
})
export default AccountDetails

如果你用的是React Hook Form/Formik等第三方表单库，不需要自己封装提交触发逻辑，直接把库自带的提交方法暴露即可，比如React Hook Form直接暴露handleSubmit(你的提交回调)的执行结果、Formik直接暴露submitForm方法，原有验证逻辑会自动生效。

• 第二步：在父组件App中创建ref绑定表单组件，同时把提交触发方法传递给导航栏组件

// App.js
import { useRef } from 'react'
import Navbar from './Navbar'
import AccountDetails from './AccountDetails'

function App() {
  const accountFormRef = useRef(null)
  const handleNavSubmit = () => {
    accountFormRef.current?.triggerSubmit()
  }
  return (
    <div className="app">
      <Navbar onSubmitClick={handleNavSubmit} />
      <AccountDetails ref={accountFormRef} />
    </div>
  )
}
export default App

• 第三步：在导航栏组件中绑定右上角按钮的点击事件，调用父组件传递的提交方法即可

// Navbar.jsx
const Navbar = ({ onSubmitClick }) => {
  return (
    <div className="nav">
      {/* 其他导航内容 */}
      <button className="submit-btn" onClick={onSubmitClick}>保存编辑</button>
    </div>
  )
}
export default Navbar

备选方案：状态提升 #

如果后续有多个组件需要共享表单填写状态，可以把表单的所有受控状态、验证逻辑都提升到父组件App中，再通过props分别传递给导航栏和表单组件，导航栏点击时直接触发父组件的提交逻辑即可。该方案改动量更大，没有多组件共享表单状态需求时不需要选用。

内容的提问来源于stack exchange，提问作者Dov Royal