将自定义筛选器输入组件与Griddle一起使用

Question

我正在使用react组件griddle来创建表。

Griddle支持一个额外的属性来显示一个过滤器输入元素，该元素用于操作表。

有没有办法在griddle中使用你自己的独立表单/输入？这样当提交第三方输入时，我可以在griddle中触发一些函数来更新表？

我已经查看了docs，并在项目中添加了一个问题here。我不知道如何做到这一点。

Answer 1

下面的页面上有一个自定义过滤的示例：http://griddlegriddle.github.io/Griddle/docs/customization/

请参阅“组件定制”部分。

Answer 2

如this demo中所示，您可以指定自定义过滤器和自定义组件：

var _ = require('underscore'),
    squish = require('object-squish');

var customFilterFunction = function(items, query) {
  return _.filter(items, (item) => {
    var flat = squish(item);

    for (var key in flat) {
      if (String(flat[key]).toLowerCase().indexOf(query.toLowerCase()) >= 0)
        return true;
    }

    return false;
  });
};

var customFilterComponent = React.createClass({
  getInitialState() {
    return {
      "query": ""
    };
  },
  searchChange(event) {
    this.setState({
      query: event.target.value
    });
    // this line is important
    this.props.changeFilter(this.state.query);
  },
  render() {
    return (
      <div className="filter-container">
        <input type="text"
               name="search"
               placeholder="Search..."
               onChange={this.searchChange} />
      </div>
    );
  }
});

然后你可以像这样初始化你的网格表格：

React.render(
  <Griddle results={fakeData} showFilter={true}
    useCustomFilterer={true} customFilterer={customFilterFunction}
    useCustomFilterComponent={true} customFilterComponent={customFilterComponent}/>,
  document.getElementById('griddle')
);

属性changeFilter被传递给您的customFilterComponent，因为它是Griddle的customFilterComponent属性。