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

Question

每次单击 "New Quote" 按钮并生成新报价时，我都试图让中心 div 背景颜色过渡。我遇到问题 1. 将过渡设置为此 div。我想要一组 5 种颜色，div 将按顺序过渡到这些颜色。这可以是 css 颜色的数组吗？不知道该怎么做。我也不确定如何 link 这个转换到按钮点击事件。

按钮组件：

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>
    )
  }
}

报价框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 /> 组件具有共同的父级。

有了它，您可以将 <Button /> 组件中的 onClick 事件附加到公共父级（例如 <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>

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

Transitioning CSS background on React component on Button click

javascript

css

styles

transition

reactjs