Réagir Etat (state)

Réagir à l'élément comme une machine d'état (State Machines). Grâce à l'interaction avec l'utilisateur, pour obtenir différents états, puis de rendre l'interface utilisateur, de sorte que l'interface utilisateur et la cohérence des données.

Réagir ans, il suffit de mettre à jour l'ensemble de l'Etat, puis re-rendre l'interface utilisateur basée sur le nouvel état (ne pas exploiter DOM).

L'exemple suivant crée des composants, méthode getInitialStatelike utilisés pour définir l'état initial, qui est un objet qui peut être lu par this.state propriété.Lorsque l'utilisateur clique sur le composant, ce qui entraîne un changement d'état, this.setState méthode pour modifier la valeur d'état après chaque modification appeler automatiquement this.render rend à nouveau le composant.

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

Essayez »