[英]React button active style
I am new to React and UI development, please bear with me. 我是React和UI开发的新手,请多多包涵。 I have a list of buttons and I am trying to set different image icon when the button is active, and when I click on another button the second button should be active and first one de-active and so on. 我有一个按钮列表,当按钮处于活动状态时,我试图设置其他图像图标,当我单击另一个按钮时,第二个按钮应处于活动状态,第一个按钮处于非活动状态,依此类推。
Here is my code: 这是我的代码:
export class ABC extends Component {
configFile = require('../../resources/stubs/config.json')
constructor(props) {
super(props);
this.state = {
cSelected: [],
isHidden: true,
level: this.configFile.Level,
amount: this.configFile.amount,
des1: this.configFile.desc1,
des2: this.configFile.desc2,
des3: this.configFile.desc3,
}
this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
};
onRadioBtnClick(cSelected, aSelected, d1, d2, d3) {
this.setState({
cSelected,
aSelected,
d1,
d2,
d3
});
}
render(){
return (
<div>
<ButtonGroup>
<Button className="circleIcon"
onClick={() => this.onRadioBtnClick(this.state.level, this.state.amount, this.state.des1, this.state.des2, this.state.des3, )}
active={this.state.cSelected === 1}><img src={incirclePurple}
alt="profile-tab-icon" />|<span className="numberCircle">1</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle2", "$1,000-$2,499", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 2}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">2</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle3", "$2,500-$4,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 3}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">3</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle4", "$5,000-$9,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 4}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">4</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle5", "$10,000-$34,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 5}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">5</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Circle6", "$35,000-$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 6}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">6</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("President's Circle", ">$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 7}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">7</span></Button>
<Button className="circleIcon" onClick={() => this.onRadioBtnClick("Chairman's Circle", ">$74,999", this.state.des1, this.state.des2, this.state.des3)} active={this.state.cSelected === 8}><img src={incirclePurple} alt="profile-tab-icon" />|<span className="numberCircle">8</span></Button>
</ButtonGroup>
<div>
<p>{this.state.cSelected}{this.state.aSelected}</p>
<ul>
<li>{this.state.d1}</li>
<li>{this.state.d2}</li>
<li>{this.state.d3}</li>
</ul>
</div>
</div>)
}
}
You could give a unique name
prop for each button and create a activeButton
state which will take the value of the activated button name: 您可以为每个按钮指定一个唯一的name
道具,并创建一个activeButton
状态,该状态将使用已激活按钮名称的值:
handleActiveButton(e) {
e.preventDefault();
const activeName = e.target.name;
this.setState({ activeName });
}
Then in className
prop of your buttons, you could do something like className={ this.state.activeName === 'button1' ? 'active' : '' }
然后在className
的按钮的道具,你可以做类似className={ this.state.activeName === 'button1' ? 'active' : '' }
className={ this.state.activeName === 'button1' ? 'active' : '' }
Where button1
is the name of the button, and active
is your css class to display your image icon. 其中button1
是按钮的名称,而active
是您的css类,用于显示图像图标。
I got it!! 我知道了!!
Populated the value of activeName through id 通过id填充activeName的值
Thanks!! 谢谢!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.