Question

我准备前言，我是React的完整菜鸟，只玩了一个星期而且我用Javascript好了，所以你可能会看到可怕的代码。

我遇到了一些过滤功能的问题。我有一个输入，我可以过滤掉标题，并且工作得很好。我也有按钮过滤，除了我选择全部时，它也有效。当我选择All按钮时，按钮过滤仍然有效，但输入过滤不再有效。

我做错了什么？我猜测最大的问题是在_hasData函数中，我在做if条件。

如果您不想查看API，event_type将返回performance，package或flex package。

任何帮助将不胜感激。感谢

ButtonFilter.js

var ButtonFilter = React.createClass({
  handleFilterChange: function(index) {
    var value = $(this.getDOMNode()).children('div:nth-child(' + index + ')').children().attr('data-type');
    this.props.updateFilter(value);
  },
  render: function() {
    return (
      <div className="button-group button-group--horizontal">
        <div className="button-group__item">
          <button className="button list button--active" data-type="all" ref="filterButton" onClick={this.handleFilterChange.bind(this, 1)}>All</button>
        </div>
        <div className="button-group__item">
          <button className="button calendar-view" data-type="performance" ref="filterButton" onClick={this.handleFilterChange.bind(this, 2)}>Performances</button>
        </div>
        <div className="button-group__item">
          <button className="button calendar-view" data-type="package" ref="filterButton" onClick={this.handleFilterChange.bind(this, 3)}>Packages</button>
      </div>
    </div>
   )
  }
});

SearchFilter.js

var SearchFilter = React.createClass({
  handleFilterChange: function() {
    var value = React.findDOMNode(this).value;
    this.props.updateFilter(value);
  },
  render: function() {
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Start typing..." />;
  }
});

Events.js

var List = React.createClass({
  render: function() {
    var content;
    if (this.props.items.length > 0) {
      var items = this.props.items.map(function(item) {
        return (
          <div className="list-item" key={item.event_id}>
            <div className="list-info">
              <div className="list-info__venue">
                <h5 className="event-title">
                  <a href="#">{item.event_name}
                    <If condition={item.event_type != 'Performance'}>
                      <span className="event-type__badge">{item.event_type}</span>
                    </If>
                  </a>
                </h5>
                <span className="event-details">{item.event_date} | {item.event_venue}</span>
              </div>
             </div>
           </div>
         )
       });

       content = {items}
     } else {
       content = <p>No items matching this filter</p>;
     }

     return (
       <div>
          {content}
       </div>
    );
  }
});

var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      data: [],
       nameFilter: '',
       typeFilter: ''
     };
  },

  componentWillMount: function () {
    this.loadEvents('http://private-4dfdc-ember26.apiary-mock.com/questions');
  },

  loadEvents: function(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      success: function(data) {
        this.setState({
        data: data
      });
     }.bind(this),
     error: function(xhr, status, err, data) {
       console.error(this.props.url, status, err.toString());
     }.bind(this)
   });
  },

  inputFilterUpdate: function(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  },

  buttonFilterUpdate: function(typeValue) {
    this.setState({
      typeFilter: typeValue
    });
  },

  _hasData: function() {
    var displayedItems = this.state.data.filter(function(item) {
      var match = item.event_name.toLowerCase().indexOf(this.state.nameFilter.toLowerCase()) || item.event_type.toLowerCase().indexOf(this.state.typeFilter.toLowerCase());

      if ( this.state.typeFilter.toLowerCase() == 'all' ) {
        return true;
      }

      return (match !== -1);
    }.bind(this));

    return (
      <div>
        <div className="sub__nav">
          <div className="search">
            <i className="fa fa-times"></i>
            <SearchFilter updateFilter={this.inputFilterUpdate} />
          </div>
          <ButtonFilter updateFilter={this.buttonFilterUpdate} />
        </div>
        <div className="list-view">
          <h6 className="list-view__title">Upcoming</h6>
          <List items={displayedItems} />
        </div>
      </div>
    );
  },

  render: function() {
    if (this.state.data) {
      return (
        <div>
          {this._hasData()}
        </div>
      )          
    } else {
      return <div>Loading...</div>;
    }

    return false
  }
});

Answer 1

如果设置为“all”，要满足过滤器和旁路类型过滤器，您可以执行以下操作：

var displayedItems = this.state.data.filter(function(item) {
  var eventName = item.event_name.toLowerCase(),
      eventNameFilter = this.state.nameFilter.toLowerCase(),
      eventType = item.event_type.toLowerCase(),
      eventTypeFilter = this.state.typeFilter.toLowerCase();

  return eventName.indexOf(eventNameFilter ) > -1 &&
         (eventTypeFilter === 'all' || eventType.indexOf(eventTypeFilter ) > -1;
}.bind(this));

React Button Filter禁用输入过滤器

1 个答案: