javascript - 单击时如何更改按钮颜色
问题描述
我有这组从 A 到 Z 的按钮,当我单击特定字母时,与该字母相关的品牌会弹出。我已经尝试了下面的代码,但是当我只单击一个按钮时它正在申请所有按钮。我该如何解决
let brandList = 'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split("");
constructor(props) {
super(props)
this.state = {
bgColor: ""
}
}
getBrandSortData(){
return(
<div className="BrandPageList_AlphabetContainer">
<button value="all" className="BrandPageList_AllButton" onClick={this.handleClick}>All</button>
{brandList.map((item,index) =>
{
let disbaled = !this.isBrandCharacterAvailable(item)
return(
<button
disabled= {disbaled}
value={item}
key={index}
block="BrandPageList_AlphabetButtons"
mods = {{enabled : !disbaled}}
onClick={this.handleClick}
style={{backgroundColor: this.state.bgColor}}
>
{item}
</button>
)}
)}
</div>
)
}
handleClick = event =>{
const brandValues = event.target.value
if(brandValues === "all"){
console.log()
return this.setAllBrands()
}
else{
let brandSortDataByCharacter = this.state.brandSortData[brandValues]
this.setState({
allBrands:
{
[brandValues]: brandSortDataByCharacter
},
bgColor: "red"
})
}
}
解决方案
event
您可以在渲染时将字母传递给单击处理程序,而不是使用该对象来确定您单击了哪个字母。
这是一个如何实现这一目标的示例。我正在使用带有钩子的功能组件,因为这是推荐的方式,但您可以在类组件中执行相同的操作:
const Alphabet = () => {
const [active, setActive] = useState();
return (
<div className='alphabet'>
{'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(char => (
<div
className={`letter ${char === active ? 'active' : ''}`}
onClick={() => setActive(char)}>{char}</div>
))}
</div>
);
};
这是一个活生生的例子
推荐阅读
- mysql - 通过google代理连接本地spring boot app到google cloud SQL
- macos - CGEventPost 无法在 Catalina (Mac OSX 10.15) 下将键盘事件传递给另一个进程
- blazor - Blazor 中的 InputNumber 绑定转换器
- wpf - 使用 wpf devexpress 在手风琴控制中更改 SVG 的颜色
- templates - 如果字段为空,如何显示文本?
- 3d - 如何使刚体“look_at”成为另一个空间
- excel - 我想要时间总和除以一个公式中前两个权重的人的总和
- datastax-enterprise - 使 datastax 集群中的少数节点比其他节点慢
- html - 如何进行字符串插值?
- html5-video - MediaRecorder 有多个秒的延迟