Question

我正在使用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>
    );
  }
});

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

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

道具changeFilter传递给您的customFilterComponent，因为它是customFilterComponent的{{1}}道具。

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

2 个答案: