我目前正在学习在React中使用样式化组件,并且在实现时遇到麻烦。
我有一排按钮(定义为div)。单击一个按钮时,我希望它的背景以某种颜色填充。所有其他按钮应保持“未选中”状态。这是我到目前为止的内容:
import React from 'react';
import styles from 'styled-components';
const ButtonsRow = styles.div`
display: flex;
justify-content: space-evenly;
`;
const Button = styles.div`
cursor: pointer;
:hover {
background-color: gray;
}
background-color: ${props => props.selected ? 'red' : 'none'};
`;
class ButtonsContainer extends React.Component {
handleClick = (e) => {
// add 'selected' prop to the clicked <Button>?
}
render() {
return(
<ButtonsRow>
<Button onClick={this.handleClick}>People</Button>
<Button onClick={this.handleClick}>Members</Button>
<Button onClick={this.handleClick}>Games</Button>
</ButtonsRow>
);
}
}
export default ButtonsContainer;
如果单击我的按钮,我想给它一个“选定的”道具。这样,如果它具有道具,那么它将填充背景色。如果没有,则没有背景色。我以为也许可以使用状态来执行此操作,但是如果要执行此操作,我认为它将适用于每个按钮。感谢您的帮助。
答案 0 :(得分:2)
您需要管理每个Button
的状态。
所有解决方案在管理按钮状态的“方式”上都会有所不同(作为单个对象/数组/等),主要概念是按钮的id
,以了解您所指的状态。
在下一个简单示例中,我使用了一个curried函数来提供按钮id
。
另一种简单的解决方案是将id
属性传递给您的按钮,并在单击按钮时对其进行查询。
const ButtonsRow = styled.div`
display: flex;
justify-content: space-evenly;
`;
const Button = styled.div`
cursor: pointer;
:hover {
background-color: gray;
}
background-color: ${props => (props.selected ? 'red' : 'none')};
`;
class ButtonsContainer extends React.Component {
state = {
first: false,
second: false,
third: true
};
toggle = buttonName => () => {
this.setState(prev => ({ [buttonName]: !prev[buttonName] }));
};
render() {
const { first, second, third } = this.state;
return (
<ButtonsRow>
<Button selected={first} onClick={this.toggle('first')}>
People
</Button>
<Button selected={second} onClick={this.toggle('second')}>
Members
</Button>
<Button selected={third} onClick={this.toggle('third')}>
Games
</Button>
</ButtonsRow>
);
}
}
答案 1 :(得分:0)
您必须创建一个变量来存储每个按钮的状态。一种更简单的方法可能是从数组中动态生成按钮,然后使用它们来维护状态。
class ButtonsContainer extends React.Component {
state = {
buttons = [{label:"People"},{label:"Members"},{label:"Games"}]
}
handleClick = (button) => (e) => {
this.setState((prevState) => ({
buttons: prevState.buttons.filter(btn => btn.label !== button.label)
.concat({...button,selected:!button.selected})
})
}
render() {
return(
<ButtonsRow>
{this.state.buttons.map(button => (<Button key={button.label} selected={button.selected} onClick={this.handleClick(button)}>{button.label}</Button>))}
</ButtonsRow>
);
}
}
export default ButtonsContainer;