我正在使用 griddle用于创建表格的 React 组件。
Griddle 支持一个额外的属性来显示一个过滤器输入元素,它可以操作表格。
有没有办法在 griddle 中使用你自己的独立表单/输入。以便在提交第三方输入时我可以触发 griddle 中的一些函数来更新表?
最佳答案
如 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 。
关于javascript - 在 Griddle 中使用自定义过滤器输入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32636003/