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

Question

每次单击“新报价”按钮并生成新报价时，我都会尝试设置中心div背景颜色过渡。我在将过渡设置为该div时遇到了麻烦1。我想有一组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>
    )
  }
}

Quote Box 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>
        );
    }
}

Answer 1

此后我假设<RandomQuoteBox />和<Button />组件具有共同的父代。

因此，您可以将onClick组件中的<Button />事件附加到公共父对象（例如<QuoteForm />）中的回调，这会修改与<RandomQuoteBox />中当前应用的颜色索引相对应的父状态变量。>

考虑下面的现场演示，我试图适应您的用例并尝试同时提炼：

const { render } = ReactDOM,
      rootNode = document.getElementById('root')

class AuthorQuotePrint extends React.Component {
  render(){
   return <div>{this.props.quote}</div>
  }
}

class Button extends React.Component {
  render(){
    return(
      <div>
        <button onClick={this.props.onNextQuote}>Next Quote</button>
        <AuthorQuotePrint quote={this.props.quote} />
      </div>
    )
  }
}

class RandomQuoteBox extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      quotes: ['Some quote', 'Some other quote', 'Just one more quote', 'Yet another quote', 'This one is quote too'],
      colors: ['red', 'green', 'blue', 'purple', 'black']
    }
    this.state = {
      ...this.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
    this.setState({
      currentQuoteIdx: nextQuoteIdx,
      currentColorIdx: (this.state.currentColorIdx+1)%this.state.colors.length
    })
  }
  
  render(){
    return(
      <div 
        style={{
          backgroundColor:this.state.colors[this.state.currentColorIdx], 
          color: '#fff',
          width: 200
        }}
       >
        <Button
          onNextQuote={this.onNextQuote}
          quote={this.state.quotes[this.state.currentQuoteIdx]}
        />
      </div>
    )
  }
}

render(<RandomQuoteBox />, rootNode)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>