Javascript 在Reactjs中过滤/创建过滤器按钮

我试图创建一些可重用的组件来过滤阵列，但我认为我做错了什么

我是不是应该像这样一直把把手舔到组件链的后面

我也不能让加载图标出现在过滤器按钮中，似乎只有在点击和过滤完成后按钮才会重新呈现

是否有更好的位置来存储活动按钮，但这是唯一可以让按钮重新渲染的方法

var FilterButton = React.createClass({
  getInitialState: function() {
    return { loading: false };
  },

  handleClick: function() {
    this.setState({ loading: true }, function() {
      this.props.handleClick(this.props.filter);
    });
    this.setState({ loading: false });
  },

  render: function() {
    var cx = React.addons.classSet;
    var classes = cx({
      'btn': true,
      'btn-white': !this.props.active,
      'btn-primary': this.props.active
    });    

    var loader = <i className="fa fa-circle-o-notch fa-spin"></i>;

    return (
      <button className={classes} onClick={this.handleClick}>
       {this.state.loading ? loader : ''} {this.props.label}
      </button>
    );
  }

});

var FilterBar = React.createClass({
  getInitialState: function() {
    return { filter: 1 };
  },

  handleClick: function(filter) {
    this.setState({ filter: filter }, function() {
      this.props.handleClick(this.state.filter);
    });
  },

  render: function() {
    var filter = this.state.filter;
    return (
      <div className="nav">
        <FilterButton handleClick={this.handleClick} active={filter == 1} filter="1" label="Pending" />
        <FilterButton handleClick={this.handleClick} active={filter == 2} filter="2" label="Canceled" />
        <FilterButton handleClick={this.handleClick} active={filter == 3} filter="3" label="Shipped" />
      </div>
    );
  }
});

var OrdersView = React.createClass({
  getInitialState: function () {
    return {orders: [], status_id: 1};
  },

  componentDidMount: function() {
      /* get orders here via ajax and set state*/
   },

   handleFilter: function(status_id) {
    this.setState({ status_id: status_id });
   },

  render: function() {
    var self = this;
    var orders = $.grep(this.state.orders, function(order, i){
      return order.status_id == self.state.status_id;
    });

    return (
      <div>
        <FilterBar handleClick={this.handleFilter} />
        <OrderList orders={orders} />
      </div> 
    );
  }

});

var FilterButton=React.createClass({
getInitialState:函数（）{
返回{loading:false}；
},
handleClick:function（）{
this.setState（{loading:true}，function（））{
this.props.handleClick（this.props.filter）；
});
this.setState（{loading:false}）；
},
render:function（）{
var cx=React.addons.classSet；
变量类=cx({
“btn”：对，
“btn白色”：！this.props.active，
“btn主”：this.props.active
});    
变量加载器=；
返回(
{this.state.loading？加载程序：'}{this.props.label}
);
}
});
var FilterBar=React.createClass({
getInitialState:函数（）{
返回{filter:1}；
},
handleClick:函数（过滤器）{
this.setState（{filter:filter}，function（）{
this.props.handleClick（this.state.filter）；
});
},
render:function（）{
var filter=this.state.filter；
返回(
);
}
});
var OrdersView=React.createClass({
getInitialState:函数（）{
返回{订单：[]，状态_id:1}；
},
componentDidMount:function（）{
/*在这里通过ajax获取订单并设置状态*/
},
handleFilter:功能（状态\u id）{
this.setState（{status\u id:status\u id}）；
},
render:function（）{
var self=这个；
var orders=$.grep（this.state.orders，函数（order，i）{
退货订单.status\u id==self.state.status\u id；
});
返回(
);
}
});

这对于Programmers.SE来说是一个离题的话题，因为它是一组特定于实现的问题。但是，我认为它非常适合StackOverflow.SE。主持人可以为你移动问题，这样你就不会收到重复的问题。