javascript - 将自定义过滤器输入组件与 Griddle 一起使用

Question

我正在使用griddle一个反应组件来创建一个表。

Griddle 支持一个额外的属性来显示一个过滤器输入元素，它可以操作表格。

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

我查看了文档并在项目中提出了问题。我不知道如何做到这一点。

Answer 1

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

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

Answer 2

如本演示所示，您可以指定自定义过滤器和自定义组件：

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>
    );
  }
});

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

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

道具changeFilter被传递给你customFilterComponent，因为它customFilterComponent是Griddle.