如何通过onClick事件向子组件传props控制Overlay显示？

你的代码存在几个关键问题导致Overlay无法正常显示：

1. ComponentOne中未声明控制弹窗显示的open状态及setOpen方法，直接调用setOpen会报错
2. InviteButton的属性传递写法错误，属性应写在标签内而非子元素位置
3. InviteButton组件目前只渲染了Overlay，缺少实际可点击的按钮元素
4. 未将ComponentOne中的open状态传递给InviteButton

以下是修正后的完整代码：

修正后的ComponentOne（file1） #

import React, { useState } from 'react'
import InviteButton from './path-to-InviteButton' // 替换为实际的组件引入路径

function ComponentOne () {
  // 声明控制弹窗显示的状态
  const [open, setOpen] = useState(false)

  return (
    <InviteButton
      type="submit"
      onClick={() => setOpen(true)}
      className="float-end"
      size="lg"
      open={open} // 将状态传递给子组件
    >
      {messages.send}
    </InviteButton>
  )
}

修正后的InviteButton（file2） #

import React from 'react'
import Overlay from './path-to-Overlay' // 替换为实际的Overlay组件引入路径

function InviteButton({ onClick, open, className, size, type, children }) {
  return (
    <>
      {/* 渲染实际可点击的按钮 */}
      <button
        type={type}
        onClick={onClick}
        className={className}
        size={size}
      >
        {children}
      </button>
      {/* 根据open状态控制Overlay显示 */}
      <Overlay show={open}>Overlay here </Overlay>
    </>
  )
}

InviteButton.defaultProps = {
  open: false,
  onClick: () => {},
  type: 'button',
  className: '',
  size: 'md'
}

export default InviteButton

补充说明 #

• 父组件ComponentOne负责维护弹窗的显示状态open，并通过props将状态和更新方法传递给子组件
• 如果需要在点击按钮后添加子组件自身的逻辑，可以在InviteButton内部封装点击事件：

const handleClick = () => {
  // 这里添加子组件专属逻辑
  onClick?.()
}

再将按钮的onClick绑定为handleClick即可

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