显示过滤的数据Reactjs

时间:2016-07-18 09:35:23

标签: arrays reactjs ecmascript-6

我是ReactJS和Javascript的新手,我偶然发现了根据用户点击的组件过滤输出数据的问题。

继承正在输出过滤器的Filter.js组件。我评论了我卡住的部分。我不清楚我应该在.filter()中添加什么逻辑来过滤掉过滤器容器下显示的公寓。

import React from 'react';
import { ReactRouter, Link } from 'react-router';

var Filter = React.createClass({
  getInitialState() {
    return {
      selected: []
    };
  },
  getDefaultProps() {
    return {
      filterList: [],
      name: '',
      id: '',
      props: []
    };
  },
  render() {
    var selected = [];

    var handleClick = function(i, filterList) {
      this.setState({clicked: i});
      var index = this.state.selected.indexOf(i);
      if (index === -1) {
        this.state.selected.push(i);
      } else {
        this.state.selected.splice(index, 1);
      }
    }

    var className = this.state.clicked ? 'selected' : '';
    return (
      <div id={this.props.id} className="filterCloud quarter-section">
        <h3>{this.props.name}</h3>
        <ul>
          {this.props.filterList.filter({/* I dont know what to put in here */}).map(function(listValue, i) {
            return <li
              className={this.state.selected.indexOf(i) > -1 ? 'selected' : ''}
              onClick={handleClick.bind(this, i, this.props.filterList)}
              key={i}>
              {listValue}
            </li>;
          }, this)}
        </ul>
      </div>
    )
  }
});

export default Filter;

这是过滤器在应用中看到的内容,其中一些已被选中。 enter image description here

我想获取所选过滤器的数据并使用该数据过滤出公寓。我不清楚这样做的最佳方式。

0 个答案:

没有答案