[英]How to change the button colour when it is clicked
我有這組從 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
object 來確定您單擊了哪個字母,您可以在呈現它時將字母傳遞給單擊處理程序。
這是一個如何實現這一目標的示例。 我正在使用帶有鈎子的功能組件,因為這是推薦的方式,但您可以在 class 組件中執行相同的操作:
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>
);
};
這是一個活生生的例子
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.