React函数式组件中子组件onClick事件失效求助

我正在React函数式组件的子组件里实现onClick函数，但事件完全没反应，不知道问题出在哪。

预期逻辑：

• 点击子组件卡片时，从userCampaigns数组里拿到对应项的id：

const userCampaigns = [
  {
    id: "curse-strahd",
    title: "Curse of Strahd",
    image: "/card-images/affroen and friends.jpg",
    description: "Scary vampire man does evil."
  }
]

• 用这个id从sessions对象里获取对应的会话列表：

const sessions = {
  "curse-strahd": [
    "session1",
    "session2",
    "session3",
    "session4"
  ]
}

• 最终展示这些会话的卡片。

组件结构：

• 父组件：ChooseCampaign
• 子组件1：UserCampaignsList（容器组件）
• 子组件2：ChooseCampaignCard（可点击的卡片组件）
• 子组件3：SessionCard（展示会话列表的卡片组件）

我的代码：

export default function ChooseCampaign() {
  const [show, setShow] = useState(false);
  const [displaySessionListId, setDisplaySessionListId] = useState("")

  function clickHandler(displayId) {
    return () => {
      setDisplaySessionListId(displayId)
      setShow(!show)
    }
  }

  return <div style={{backgroundSize: 'cover', backgroundImage: `url(${imgCaravan})`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'fixed', top: 0, width: '100%', height: '100%', marginLeft: '-8px' }}>
    <UserCampaignsList>
      {userCampaigns.map((val) => (<ChooseCampaignCard onClick={clickHandler(val.id)} key={val.id} id={val.id} image={val.image} title={val.title} description={val.description}/>))}
    </UserCampaignsList>
    <SessionCard sessionListId={displaySessionListId} />
  </div>
}

核心问题：子组件未传递onClick事件 #

你给ChooseCampaignCard传了onClick属性，但如果这个自定义子组件没有接收并绑定这个事件到内部的可点击DOM元素上，事件根本不会触发。

解决步骤： #

1. 修改ChooseCampaignCard组件，接收onClick props并绑定到内部根元素：

// ChooseCampaignCard.jsx
export default function ChooseCampaignCard({ onClick, id, image, title, description }) {
  return (
    // 把onClick绑定到根容器，确保点击卡片任意区域都能触发事件
    <div onClick={onClick} style={{ cursor: 'pointer', padding: '1rem', border: '1px solid #ccc' }}>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  )
}

2. 优化状态切换逻辑
   当前setShow(!show)可能因React异步更新导致状态偏差，改用函数式更新确保基于最新状态切换：

function clickHandler(displayId) {
  return () => {
    setDisplaySessionListId(displayId)
    // 函数式更新，获取最新的show状态
    setShow(prevShow => !prevShow)
  }
}

3. 确保SessionCard正确渲染数据
   检查SessionCard是否根据传入的sessionListId从sessions对象中获取对应列表：

// SessionCard.jsx
export default function SessionCard({ sessionListId }) {
  const sessions = {
    "curse-strahd": [
      "session1",
      "session2",
      "session3",
      "session4"
    ]
  }
  const currentSessions = sessions[sessionListId] || []

  return (
    <div>
      <h2>会话列表</h2>
      <ul>
        {currentSessions.map(session => (
          <li key={session}>{session}</li>
        ))}
      </ul>
    </div>
  )
}

额外注意点： #

• 避免在ChooseCampaignCard内部元素中使用event.stopPropagation()，否则会阻止事件冒泡到父组件绑定的onClick。
• 如果卡片内有按钮等原生可点击元素，确保它们不会覆盖父容器的点击事件。

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