Reagieren Staat (Staat)

Reagieren Sie auf die Komponente als eine Zustandsmaschine (State Machines). Durch die Interaktion mit dem Benutzer, verschiedene Zustände zu erreichen, dann die Benutzeroberfläche machen, so dass die Benutzeroberfläche und die Datenkonsistenz.

Reagieren Jahren einfach die Landtags- aktualisieren und anschließend neu rendern die Benutzeroberfläche basiert auf dem neuen Zustand (nicht zu betreiben DOM).

Das folgende Beispiel erzeugtLike Komponenten, getInitialState Methode verwendet , um den Ausgangszustand zu definieren, das heißt, ein Objekt , das von this.state Eigenschaft gelesen werden kann.Wenn der Benutzer auf die Komponente klickt, in einer Zustandsänderung führt, zu this.setState Methode den Statuswert ändern, nachdem automatisch jede Änderung rufen this.render wieder die Komponente macht.

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

Versuchen »