javascript - 如何将颜色置于React状态？

Question

我有一个有状态组件，单击它后会更改 div 背景颜色。我将 bool 标志保留在状态中，当它发生变化时，组件会重新计算其颜色并重新渲染自身。

我怎样才能摆脱这个 bool 标志，我想保持颜色本身的状态，当颜色状态改变时，组件将重新渲染自身。

class App extends React.Component {
constructor(props) {
  super(props);
  this.state = { flag: true };
}
changeColor(){this.setState({flag: !this.state.flag})};

render(){
var bgColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
return ( <div style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>wonderful</div> );
}
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

将其移至changeColor函数

var bgColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

然后将bgColor存储在同一changeColor函数内的状态中，例如

this.setState({ color: bgColor });

例如

class App extends React.Component {

constructor(props) {
  super(props);
  this.state = {color: null};
}

changeColor(){
    this.setState({
        color: 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 
        (Math.floor(Math.random() * 256)) + ',' + 
        (Math.floor(Math.random() * 256)) + ')' })
    };
}

render(){
  return ( 
    <div style={{backgroundColor: this.state.color}} 
      onClick={this.changeColor.bind(this)}
    >
      wonderful
    </div>
 );
}