我有一个从 A 到 Z 的按钮列表,当特定字母有任何品牌时,只有一些按钮会突出显示。当我点击一个特定的字母时,该按钮的文本颜色应该会改变。我尝试了下面的代码,但它删除了其他按钮和禁用按钮的突出显示颜色
constructor(props) {
super(props)
this.state = {
selectedButton : true
}
}
getBrandSortData(){
let btn_class = this.state.black ? "blackButton" : "whiteButton";
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}
className={btn_class}
>
{item}
</button>
)}
)}
</div>
)
}
handleClick = event =>{
const brandValues = event.target.value
if(brandValues === "all"){
return this.setAllBrands()
}
else{
let brandSortDataByCharacter = this.state.brandSortData[brandValues]
this.setState({
allBrands:
{
[brandValues]: brandSortDataByCharacter,
selectedButton: !this.state.selectedButton
},
})
}
}
我有以下 css 文件
.blackButton{
color: white;
}
.whiteButton{
color: black;
}
如何更改link中所示的文本颜色
答案 0 :(得分:0)
您需要创建一个单独的按钮组件,以免每次将更改应用于子项时都重新渲染整个父项...
import { useState ) from 'react';
..
const Button = ({ clickCallback, initClass }) {
const [ state, setState ] = useState(initClass);
const toggleColor = () => {
setState(state === 'whiteButton' ? 'blackButton' : 'whiteButton' );
}
const handleClick = () => {
clickCallback(toggleColor);
}
render(
<button className={ state } onClick={ handleClick } ></button>
);
}
..
在父级
import Button from 'location'; // button component
..
// inside the parent component
const clickCallback = toggleColor => {
this.state.activeButton && this.state.activeButton();
this.state.activeButton = toggleColor;
}
..
// and in the render
<Button clickCallback={ clickCallback } initClass={ btn_class } />
当然这是一个缩小的例子,添加你需要的属性