有没有办法制作一个按钮功能，当按下时改变 React 中另一个组件的标题？

Question

我正在尝试制作一个音乐应用程序，首页上有按钮。当您按下其中一个按钮时，会弹出一张卡片。我希望卡片标题取决于按下哪个按钮。我正在为我的项目使用 React。有什么办法可以做到吗？

我的按钮有这个功能

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


export function Button (){


return (
    <>
        <Wrapper>
            <GenreButton text='Country' />
            <GenreButton text='Disco' />
            <GenreButton text='Funk' /> 
            <GenreButton text='House' /> 
       
        </Wrapper>
    </>
)

}

对于我的卡片组件：

const CardTitle2 = () => {
    const [cardTitle, setCardTitle] = useState ('string')
    return <StyledCardTitle onClick={() => setCardTitle('New Title')}>{cardTitle}</StyledCardTitle>

到目前为止，我已经尝试将 Card 组件导入到我的 Button 组件中，在我的 GenreButton 函数中添加了一个 onClick 属性。

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

然后在 return 语句中的一个 GenreButton 上插入一个 onClick。

现在我知道，当我按下标题时，我的卡片标题将从 'string' 更改为 'New Title'。但是我是否可以将卡片的标题更改为等于我从按钮输入的字符串？

Answer 1

您应该提升状态，例如将状态提升到您的主页：

const HomePage = () => {
   const [title, setTitle] = useState('string')

   return (
     <Card title={title}/>
     <Buttons setTitle={setTitle}/>
   )
}

供参考：https://reactjs.org/docs/components-and-props.html

Answer 2

所以我想出了怎么做。

export function Button (){ 
const [title, setTitle] = useState('')
function GenreButton({ text }) {
    return <StyledGenreButton onClick={() => setTitle(text)}>{text}</StyledGenreButton>
}


<Wrapper>
            <GenreButton text='Country'/>
            <GenreButton text='Disco' />
            <GenreButton text='Electro' /> 
</Wrapper>
            <CardWrapper>
                <CardTitle title={title} />
            </CardWrapper>

有没有办法制作一个按钮功能，当按下时改变 React 中另一个组件的标题？

Is there a way to make a button function, that when pressed changes the title of another component in React?

javascript

reactjs

web-deployment