「カートに追加」ボタンを作成するために、反応を少しいじっています。これが私のコードです。
var ProductPurchase = React.createClass({
handleSubmit: function(e){
e.preventDefault();
$.ajax({
url: "/cart/add.js",
method: "post",
dataType: "json",
data: {
"id": this.props.variantId,
"quantity": this.props.quantity,
},
success: function(data) {
// emit cart added event
}.bind(this),
error: function(xhr, status, err) {
// emit error event (cart added)
}.bind(this)
});
},
getDefaultProps: function(){
return {
quantity: 1,
variantId: 231634908,
buttonText: "Add to cart"
}
},
render: function() {
return (
<div className="productPurchase">
<form action="/cart/add" method="post" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
<input type="hidden" name="quantity" value={ this.props.quantity } />
<input type="hidden" name="id" value={ this.props.variantId } />
<button type="submit">{this.props.buttonText}</button>
</form>
</div>
);
}
});
私が興味を持っているのは、この ajax ハンドラーです。これらのイベントをどこに導くべきかわからないことを除いて、反応の全体的なポイントはコンポーネント間の相互運用性であると確信しています。成功した場合はカート カウント インジケーター、失敗した場合はエラー アラートなど、いくつかの異なるコンポーネントを想像できますが、これらを利用する方法が正確にはわかりません。これがフラックスのディスパッチャーの要点ですか?