Javascript 在单击按钮时转换React组件上的CSS背景

每次单击“New Quote”（新报价）按钮并生成新报价时，我都会尝试进行中心div背景色转换。我有麻烦了。通过设置这个div的转换。我想有一套5种颜色的div将按顺序转换。这可以是css颜色的数组吗？我不知道该怎么办。我也不知道如何将此转换链接到按钮单击事件

按钮组件：

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  onButtonClick() {
    this.setState({
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    });
  }
  render(){
    return(
    <div>
    <button onClick={this.onButtonClick} type='button' class='btn btn-primary' 
    style={{
      position: 'absolute',
      right: '10px',
      bottom: '10px',
      padding: '2%'
    }}>New Quote</button>
    {this.state.showComponent ? <AuthorQuotePrint props={QUOTES}/> : null}
    </div>
    )
  }
}

class RandomQuoteBox extends React.Component{
    render(){
      const myStyle={
        backgroundColor: 'red',
                  width: '500px',
                  height: '300px',
                  margin: '0 auto'
      };
      return(
        <div class="container">
            <div class="row">
              <div class="col">
              </div>
              <div class="col-8">
                  <div class="card" style={myStyle}> 
                    <div>
                      <Button />
                    </div>
                  </div>
                </div>
              <div class="col">
                </div>
            </div>
          </div>
        );
    }
}

class按钮扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
showComponent:对，
cardColor：没错，
背景颜色：真的
};
this.onButtonClick=this.onButtonClick.bind（this）；
}
onButtonClick（）{
这是我的国家({
showComponent:对，
cardColor：没错，
背景颜色：真的
});
}
render（）{
返回(
新报价
{this.state.showComponent？：null}
)
}
}

报价箱分区：

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  onButtonClick() {
    this.setState({
      showComponent: true,
      cardColor: true,
      backgroundColor: true
    });
  }
  render(){
    return(
    <div>
    <button onClick={this.onButtonClick} type='button' class='btn btn-primary' 
    style={{
      position: 'absolute',
      right: '10px',
      bottom: '10px',
      padding: '2%'
    }}>New Quote</button>
    {this.state.showComponent ? <AuthorQuotePrint props={QUOTES}/> : null}
    </div>
    )
  }
}

class RandomQuoteBox extends React.Component{
    render(){
      const myStyle={
        backgroundColor: 'red',
                  width: '500px',
                  height: '300px',
                  margin: '0 auto'
      };
      return(
        <div class="container">
            <div class="row">
              <div class="col">
              </div>
              <div class="col-8">
                  <div class="card" style={myStyle}> 
                    <div>
                      <Button />
                    </div>
                  </div>
                </div>
              <div class="col">
                </div>
            </div>
          </div>
        );
    }
}

class RandomQuoteBox扩展了React.Component{
render（）{
康斯特·迈斯泰尔={
背景颜色：“红色”，
宽度：“500px”，
高度：“300px”，
边距：“0自动”
};
返回(
);
}
}

我假设以后

和

组件有共同的父组件

这样，您可以将

组件中的

onClick

事件附加到公共父级（例如

）中的回调，该回调修改与

中当前应用的颜色索引相对应的父级状态变量

考虑下面的实时演示，我试图使其适应您的用例，同时也试图保持精练：

const{render}=ReactDOM，
rootNode=document.getElementById（'root'））
类AuthorQuotePrint扩展了React.Component{
render（）{
返回{this.props.quote}
}
}
类按钮扩展了React.Component{
render（）{
返回(
下一个报价
)
}
}
类RandomQuoteBox扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
引号：['一些引号'，'另一些引号'，'再多一个引号'，'还有另一个引号'，'这一个也是引号'，
颜色：[“红色”、“绿色”、“蓝色”、“紫色”、“黑色”]
}
此.state={
…这个州，
currentQuoteIdx:Math.random（）*this.state.quotes.length | 0，
currentColorIdx:0
}
this.onNextQuote=this.onNextQuote.bind（this）
}
onNextQuote（）{
const nextQuoteIdxShift=0 | Math.random（）*this.state.quotes.length | | 1，
nextQuoteIdx=（this.state.currentQuoteIdx+nextQuoteIdxShift）%this.state.quotes.length
这是我的国家({
currentQuoteIdx:nextQuoteIdx，
currentColorIdx:（this.state.currentColorIdx+1）%this.state.colors.length
})
}
render（）{
返回(
)
}
}
渲染（，根节点）

---

您的解决方案确实提供了正确的功能，谢谢。我在将颜色更改链接到生成新报价时遇到问题。我不想改变颜色，这是。我试过了，但没有成功。我还尝试将OnButton单击直接放在子按钮组件中：这也不起作用。@ TraceRe11:考虑我的答案的更新版本，它看起来更接近您的用例，同时实现相同的概念。