React开发中如何在Form提交时修改子Modal组件的状态

你可以通过状态提升的方式实现需求，具体修改如下：

1. 改造Form组件 #

将控制Modal显隐的状态放在Form内部，提交表单时修改该状态即可触发Modal显示：

import { useState } from 'react'
import Modal from './Modal'

export default function Form() {
  // 新增控制Modal显隐的状态
  const [showModal, setShowModal] = useState(false)
  const handleSubmit = (e) => {
    e.preventDefault()
    // 表单提交后打开Modal
    setShowModal(true)
  }
  return (
    <form onSubmit={handleSubmit}>
      {/* 把显隐状态和关闭回调传给Modal，注意你原代码里的SuccessModal对应导入的Modal组件，这里修正命名 */}
      <Modal open={showModal} onClose={() => setShowModal(false)} />
      <div className='mt-1'>
        ...
      </div>
    </form>
)}

2. 改造Modal组件 #

移除内部维护的open状态，改为从父组件传递的props中获取控制参数：

import { Transition, Dialog, Fragment } from 'react' // 原代码缺相关依赖导入，此处补全

// 从props解构获取显隐状态和关闭方法
export default function Modal({ open, onClose }) {
  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as='div'
        static
        open={open}
        onClose={onClose}
      >
        ...
      </Dialog>
     </Transition.Root>
  )
}

实现原理 #

原Modal组件把显隐状态封装在内部，父组件没有权限直接修改该状态，因此需要把这个需要跨组件共享的状态，提升到需要触发显隐动作的最近共同父组件（也就是Form组件）里维护，再通过props把状态值、修改状态的回调传递给Modal组件。这样Form提交时修改自身的状态，就能同步更新Modal的显隐；Modal内部触发关闭动作时，调用父组件传过来的回调也能同步修改父组件的状态，保证两边状态完全一致。

如果需要保留Modal独立使用的能力，也可以给props设置默认值，父组件不传控制参数时降级使用内部状态，适配更多使用场景。

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