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

将其移至$("a").on("click",function(){ var link=$(this).attr('href'); var hash = link.substring(link.indexOf('#')+1); $('#selectOptions option').removeAttr('selected'); $('#selectOptions .'+hash).attr('selected',true); });函数

changeColor

然后将var bgColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';存储在相同bgColor函数内的状态内，例如

changeColor

e.g。

this.setState({ color: bgColor });

Answer 2

使颜色成为状态变量，使用componentDidMount上的颜色函数计算初始颜色，然后在点击时重新计算。

＆＃13;

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

＆＃13;

<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' />

＆＃13;

如何将颜色置于React状态？

2 个答案: