21

「カートに追加」ボタンを作成するために、反応を少しいじっています。これが私のコードです。

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 ハンドラーです。これらのイベントをどこに導くべきかわからないことを除いて、反応の全体的なポイントはコンポーネント間の相互運用性であると確信しています。成功した場合はカート カウント インジケーター、失敗した場合はエラー アラートなど、いくつかの異なるコンポーネントを想像できますが、これらを利用する方法が正確にはわかりません。これがフラックスのディスパッチャーの要点ですか?

4

4 に答える 4