有没有办法制作一个按钮功能,当按下时改变 React 中另一个组件的标题?
Is there a way to make a button function, that when pressed changes the title of another component in React?
我正在尝试制作一个音乐应用程序,首页上有按钮。当您按下其中一个按钮时,会弹出一张卡片。我希望卡片标题取决于按下哪个按钮。我正在为我的项目使用 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'。但是我是否可以将卡片的标题更改为等于我从按钮输入的字符串?
您应该提升状态,例如将状态提升到您的主页:
const HomePage = () => {
const [title, setTitle] = useState('string')
return (
<Card title={title}/>
<Buttons setTitle={setTitle}/>
)
}
所以我想出了怎么做。
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。有什么办法可以做到吗?
我的按钮有这个功能
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'。但是我是否可以将卡片的标题更改为等于我从按钮输入的字符串?
您应该提升状态,例如将状态提升到您的主页:
const HomePage = () => {
const [title, setTitle] = useState('string')
return (
<Card title={title}/>
<Buttons setTitle={setTitle}/>
)
}
所以我想出了怎么做。
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>