如何将ModalForm组件的打开功能绑定到BookCard内已有的按钮上

以下是两种常用的实现方式，可根据你的项目实际情况选择：

方案1：状态提升（更推荐，符合React单向数据流规范） #

核心逻辑是把弹窗的显隐状态放到父组件BookCard中管理，ModalForm改为受控组件，同时支持隐藏默认触发按钮。

第一步：修改ModalForm组件 #

// ModalForm.js
const ModalForm = ({ 
  hideTriggerBtn = false, // 新增：是否隐藏默认触发按钮
  visible, // 新增：父组件传入的显隐状态
  onVisibleChange, // 新增：父组件传入的修改状态方法
  /* 你原来的其他props */
}) => {
  // 你原来的其他逻辑
  const handleClose = () => {
    // 你原来的关闭逻辑
    onVisibleChange(false)
  }

  return (
    <div>
      {/* 只有hideTriggerBtn为false时才渲染默认按钮 */}
      {!hideTriggerBtn && <Button onClick={() => onVisibleChange(true)} />}
      {/* 你的弹窗组件绑定visible属性，关闭事件绑定handleClose */}
      <你用的弹窗组件 open={visible} onClose={handleClose}>
        {/* 你原来的表单内容 */}
      </你用的弹窗组件>
    </div>
  )
}

第二步：修改BookCard组件 #

// BookCard.js
import { useState } from 'react'

const BookCard = ({id, name, cover, description, price, count, loadResponse}) => {
  // 新增：管理弹窗显隐状态
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <Card>
      {/* some code */}
      <ModalForm 
        hideTriggerBtn 
        visible={isModalOpen}
        onVisibleChange={setIsModalOpen}
        /* 你原来的其他props */ 
      />
      <button 
        className="edit-button"
        onClick={() => setIsModalOpen(true)} // 绑定打开弹窗逻辑
      >
        <box-icon name='edit-alt'/>
      </button>
    </Card>
  )
}

方案2：ref暴露方法（适合不想改动ModalForm原有逻辑的场景） #

第一步：修改ModalForm组件 #

// ModalForm.js
import { forwardRef, useImperativeHandle, useState } from 'react'

const ModalForm = forwardRef(({ 
  hideTriggerBtn = false, 
  /* 你原来的其他props */
}, ref) => {
  const [visible, setVisible] = useState(false)
  const handleClickOpen = () => setVisible(true)
  const handleClose = () => setVisible(false)

  // 暴露open方法给父组件
  useImperativeHandle(ref, () => ({
    openModal: handleClickOpen
  }))

  return (
    <div>
      {!hideTriggerBtn && <Button onClick={handleClickOpen} />}
      <你用的弹窗组件 open={visible} onClose={handleClose}>
        {/* 你原来的表单内容 */}
      </你用的弹窗组件>
    </div>
  )
})

第二步：修改BookCard组件 #

// BookCard.js
import { useRef } from 'react'

const BookCard = ({id, name, cover, description, price, count, loadResponse}) => {
  const modalRef = useRef(null)

  return (
    <Card>
      {/* some code */}
      <ModalForm 
        ref={modalRef}
        hideTriggerBtn
        /* 你原来的其他props */ 
      />
      <button 
        className="edit-button"
        onClick={() => modalRef.current?.openModal()} // 调用子组件暴露的打开方法
      >
        <box-icon name='edit-alt'/>
      </button>
    </Card>
  )
}

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