React中如何实现点击按钮修改另一组件的卡片标题？

你当前的写法存在两个核心问题：

• 你给GenreButton传入的onClick没有绑定到按钮的点击事件上，而是直接当成内容渲染，完全不会触发
• 标题状态cardTitle定义在卡片组件内部，外部的按钮组件无法访问和修改这个状态，所以没法实现点击按钮改标题的需求

只需要按以下步骤调整代码即可实现需求：

步骤1：修正GenreButton组件 #

把传入的onClick绑定到按钮的点击事件上，不要直接渲染函数：

export function GenreButton({ text, onClick }) {
    return <StyledGenreButton onClick={onClick}>{text}</StyledGenreButton>
}

步骤2：提升状态到公共父组件 #

将原本存在卡片内部的标题状态，移动到同时包含按钮组件和卡片组件的父组件（比如你的首页组件），这样两个组件都能访问和修改这个状态：

import { useState } from 'react'
import { Button } from './Button'
import CardTitle2 from './CardTitle2'

// 示例为你的首页父组件
function HomePage() {
  // 卡片标题状态，放到公共父级管理
  const [cardTitle, setCardTitle] = useState('默认标题')
  // 可选：卡片显隐状态，控制点击按钮后弹出卡片
  const [showCard, setShowCard] = useState(false)

  return (
    <div className="home-page">
      {/* 将状态修改方法传递给按钮组件 */}
      <Button setCardTitle={setCardTitle} setShowCard={setShowCard} />
      {/* 将标题状态传递给卡片组件，显隐控制卡片弹出 */}
      {showCard && <CardTitle2 cardTitle={cardTitle} />}
    </div>
  )
}

步骤3：修改Button组件绑定点击事件 #

接收父组件传递的状态修改方法，给每个分类按钮绑定点击事件，点击时将按钮的text值传入修改标题：

export function Button ({ setCardTitle, setShowCard }) {
  return (
    <Wrapper>
        <GenreButton 
          text='Country' 
          onClick={() => {
            setCardTitle('Country')
            setShowCard(true)
          }} 
        />
        <GenreButton 
          text='Disco' 
          onClick={() => {
            setCardTitle('Disco')
            setShowCard(true)
          }} 
        />
        <GenreButton 
          text='Funk' 
          onClick={() => {
            setCardTitle('Funk')
            setShowCard(true)
          }} 
        />
        <GenreButton 
          text='House' 
          onClick={() => {
            setCardTitle('House')
            setShowCard(true)
          }} 
        />
    </Wrapper>
  )
}

步骤4：简化CardTitle2组件 #

不需要在卡片内部单独维护状态，直接使用父组件传递的标题属性即可：

// 如果不需要保留点击卡片标题改标题的逻辑，直接用下面的写法
const CardTitle2 = ({ cardTitle }) => {
  return <StyledCardTitle>{cardTitle}</StyledCardTitle> 
}

// 如果需要保留原来点击卡片改标题的功能，就把set方法也传进来
const CardTitle2 = ({ cardTitle, setCardTitle }) => {
  return <StyledCardTitle onClick={() => setCardTitle('New Title')}>{cardTitle}</StyledCardTitle> 
}

如果用后面保留点击卡片改标题的写法，父组件调用卡片时要多传一个setCardTitle属性：

<CardTitle2 cardTitle={cardTitle} setCardTitle={setCardTitle} />

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