Reagire Stato (stato)

Reagire alla componente come una macchina a stati (macchine a stati). Attraverso l'interazione con l'utente, per raggiungere stati diversi, quindi rendere la UI, in modo che la consistenza interfaccia utente e dati.

Reagire anni, è sufficiente aggiornare l'assemblea dello stato, e quindi ri-renderizzare l'interfaccia utente basata sul nuovo stato (non operare DOM).

L'esempio seguente crea componentiLikeButton, metodo getInitialState usati per definire lo stato iniziale, cioè un oggetto che può essere letto da this.state proprietà.Quando l'utente fa clic sul componente, con un conseguente cambiamento di stato, this.setState metodo per modificare il valore di stato dopo ogni modifica chiamare automaticamente this.render rende ancora una volta il componente.

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);

Prova »