ステート(状態)を反応させます2024 年の最新の入門チュートリアル。このコースでは ステート(状態)を反応させます について学習できます。
ステートマシン(ステートマシン)としての成分に反応します。 ユーザとの相互作用を介して、UIをレンダリングし、その後、そのようにユーザーインターフェイスとデータの一貫性をさまざまな状態を達成します。
単に状態アセンブリを更新年反応し、新しい状態に基づいて再レンダリングユーザインターフェース(DOMを操作していません)。
次の例では、初期状態を定義するために使用されるいいね!ボタンコンポーネント 、getInitialState法、this.stateプロパティで読み取り可能なオブジェクトを作成します。 ユーザが状態変更を生じ、コンポーネントをクリックすると、それぞれの変更が自動的にthis.renderを呼び出した後の状態の値を変更するthis.setState方法は再びコンポーネントを描画します。
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') );