10
react.jsの使用方法を学び、イベントハンドラを使用する際にいくつか問題があります。最終的な質問は次のようなものです：サーバー側のレンダリングを使用し、イベントハンドラをクライアントに自動的に送信することは可能ですか？React.jsサーバサイドのレンダリングとイベントハンドラ
はここに私の例である： 私は、サーバー側をレンダリングし、クライアント
var React = require("react");
var DefaultLayout = require("./layout/default");
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 ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
var IndexComponent = React.createClass({
render: function(){
return (
<DefaultLayout title={this.props.name}>
<div>
<h1>React Test</h1>
</div>
<div id="testButton">
<LikeButton/>
</div>
<script type="text/babel" src="/js/react.js"></script>
</DefaultLayout>
)
}
});
しかし、「ボタンのように」任意の相互作用を持っていないに送信index.jsxを持っています。私はこのコードをクライアントサイドに追加する必要があります。
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 ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('testButton')
);
私はreact.jsから始めましたが、ここではいくつかの主要な概念が欠落している可能性があります。しかし、なぜreact.jsは、ページサーバー側をレンダリングするときにコードを作成するだけではなく（これをクライアントに手動で追加する必要があります） このように、私は冗長なコードを持っており、これは大きなアプリケーションで混乱するように感じます。 少なくともreact.jsは、2つのLikeButtonを描画せず、作成した1つのサーバー側をクライアント側コンポーネントに「バインド」するほどスマートです。
これはあなたの質問とは無関係ですが、私はあなたがonClickに渡す前にhandleClick関数をバインドすることになっていると信じています。そうしないと正しいコンテキストがありません。 （しかし、なぜthis.setStateを呼び出すときにエラーをスローする必要があるので、ボタンをクリックするとエラーにならないのか分かりません） –
React.createClassを使用する場合、@ktruongバインディングは必要ありません。自動的にバインドされます。 –
@ jeffpc1993これを指摘してくれてありがとう！ –