javascript - 在 Griddle 中使用自定义过滤器输入组件

Question

我正在使用 griddle用于创建表格的 React 组件。

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

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

我看过 docs并提出问题 here在项目上。我不知道如何做到这一点。

Answer 1

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

然后您可以像这样初始化您的 Griddle 表:

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

Prop changeFilter 被传递给您的 customFilterComponent 因为它是 Griddle 的 customFilterComponent Prop 。