我已经将一组单词映射到按钮组。在状态下我有一个索引和一个颜色值
this.state = {
selectedWordIndex:'', //e.g. 3
selectedWordColor:'' //e.g. rgb(137,197,8)
}
索引和颜色在另一个函数中设置。
var counter = -1;
return this.state.sentenceArray.map((word) => {
counter += 1
return (
<button
key={counter}
type="button"
className="btn btn-default"
style={{}}>{word}</button>);});
如何更改索引按钮的颜色?
最佳答案
所以如果你想改变索引为=== this.state 的按钮的颜色。 selectedWordIndex,下面的代码应该可以工作。
var counter = -1;
return this.state.sentenceArray.map((word) => {
counter += 1
return (
<button
key={counter}
type="button"
className="btn btn-default"
style={ this.state.selectedWordIndex === counter ?
{ color:this.state.selectedWordColor } :
{}
}
>{word}</button>);});
关于css - Reactjs,带有状态数据的内联样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41092860/