如何將顏色置於React狀態？

Question

我有一個狀態組件，點擊它後會更改div背景色。我保持一個布爾標誌狀態，當它改變時，組件重新計算它的顏色並重新渲染它自己。

如何擺脫這個布爾標誌，我想保持顏色本身處於狀態，當顏色狀態發生變化時，組件將自行重新渲染。

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

Answer 2

使色彩狀態變量，使用上componentDidMount顏色功能計算初始顏色，然後在點擊重新計算。

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.setColor = this.setColor.bind(this) 
 
    this.state = { 
 
     color: null 
 
    } 
 
    } 
 

 
    componentDidMount() { 
 
    this.setColor() 
 
    } 
 

 
    setColor() { 
 
    let newColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')' 
 
    this.setState({color: newColor}) 
 
    } 
 

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='root' />