我不知道该怎么说。我正在学习React，并且已经通过访存将数据加载到React-Table中。我尝试使用React-Table和仅自定义普通div和表。
我想从A，B，C，D ... Z创建字母的触摸按钮。这些按钮应调用按钮中字母的过滤器。因此，例如按钮如下。
// In Directory.js
class FilterButtons extends React.Component {
alphaFilter(e) {
console.log(e.target.id);
// somehow filter the react table
}
render() {
return (
<div>
<button onClick={this.alphaFilter} id="A" className="letter">A</button>
<button onClick={this.alphaFilter} id="B" className="letter">B</button>
<button onClick={this.alphaFilter} id="C" className="letter">C</button>
</div>
);
}
}
const BottomMenu = props => (
<div className="btm-menu">
<div className="toprow">
<div className="filter-keys">
<FilterButtons />
</div>
</div>
</div>
);
//我有一个目录扩展类的类，其中包含BottomMenu
//我也有一个带有React Table的DataGrid.js
class DataGrid extends React.Component {
constructor() {
super();
this.state = {
data: [],
};
}
componentWillMount() {
fetch('http://localhost:3000/rooms.json').then((results) => results.json()).then((data) => {
console.log(data.room);
this.setState({
data: data.room
})
})
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
filterable
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value}
columns={[
{
Header: "Name",
accessor: "dName",
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value)
},
{
Header: "Department",
accessor: "dDept"
},
{
Header: "Room",
accessor: "dRoom"
},
{
Header: "Map",
accessor: "dRoom",
id: "over",
}
]
}
defaultPageSize={14}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
export default DataGrid;
在这一点上，我不确定如何获得A，B，C字母之一的按钮单击以过滤React Table。我不希望一直使用“输入字段”选项，因为我只想要按钮，因为用户没有键盘，只有触摸。
基本上，React Table或任何可以通过单击带有字母的按钮来过滤的表都将被传递回过滤器。如果我使用的是JQuery，我将使用按钮单击，然后以这种方式进行过滤。我仍然还没有了解React的所有来龙去脉以及如何做到这一点。我也想使用外部按钮进行排序，但希望它应该更容易。
谢谢。
抱歉，如果所有这些都没有意义，我只是想将其列出。再说一次，没有键盘，只有触摸屏上的触摸，所以输入字段对我不起作用。
最佳答案
为了使React-Table过滤器可以通过按钮从外部进行控制，您应该看一下Controlled Table示例。然后表组件变成 controlled component.
在这里，您可以从外部设置表格过滤器的状态，并使用两个 Prop :
<ReactTable ...(your other props)
filtered={this.state.filtered}
onFilteredChange={filtered => this.setState({ filtered })}
/>
filtered属性将监视状态的变化。因此，每当您通过字母按钮(例如)通过字母按钮更新其值时this.setState({filtered: { id: "dName", value: "A"}})
表格的过滤器将更新。同样，onFilteredChange应该在另一个方向上起作用，即，react-table的嵌入式过滤可以更新本地状态。这样您就可以监视它并在DataGrid组件中使用它的值。
不过，另一种选择是避免使用局部状态，并在redux中实现它。因为卡在组件周围的状态最终将成为错误的来源，并增加调试的复杂性。
更新-根据问题所有者的评论获取更多详细信息:
为了一起使用FilterButtons和DataGrid，可以定义一个容器组件，该容器组件同时封装FilterButtons和DataGrid。
容器组件保留共享状态，并且过滤功能在状态功能上运行。但是数据仍将驻留在datagrid中。
class DataGridWithFilter extends React.Component {
// you need constructor() for binding alphaFilter to this.
// otherwise it cannot call this.setState
constructor(props) {
super(props);
this.alphaFilter = this.alphaFilter.bind(this);
}
// personally i do not use ids for passing data.
// therefore introduced the l parameter for the letter
alphaFilter(e,l) {
console.log(e.target.id);
this.setState({filtered: { id: "dName", value: l}});
}
render(){
return <div>
<DataGrid filtered={this.state.filtered}
filterFunc={this.alphaFilter}
</DataGrid>
<BottomMenu filtered={this.state.filtered}
filterFunc={this.alphaFilter} />
</div>
}
}
同样，上述内容还需要使用BottomMenu和FilterButtons组件中的prop
filterFunc。class FilterButtons extends React.Component {
render() {
const {props} = this;
return (
<div>
<button onClick={(e) => props.filterFunc(e, "A")} id="A" className="letter">A</button>
<button onClick={(e) => props.filterFunc(e, "B")} id="B" className="letter">B</button>
<button onClick={(e) => props.filterFunc(e, "C")} id="C" className="letter">C</button>
</div>
);
}
}
const BottomMenu = props => (
<div className="btm-menu">
<div className="toprow">
<div className="filter-keys">
<FilterButtons filterFunc = {props.filterFunc} />
</div>
</div>
</div>
);
class DataGrid extends React.Component {
constructor() {
super();
this.state = {
data: [],
};
}
componentWillMount() {
fetch('http://localhost:3000/rooms.json').then((results) => results.json()).then((data) => {
console.log(data.room);
this.setState({
data: data.room
})
})
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
filterable
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value}
columns={[
{
Header: "Name",
accessor: "dName",
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value)
},
{
Header: "Department",
accessor: "dDept"
},
{
Header: "Room",
accessor: "dRoom"
},
{
Header: "Map",
accessor: "dRoom",
id: "over",
}
]
}
defaultPageSize={14}
className="-striped -highlight"
filtered = {this.props.filtered}
onFilteredChange = {filtered => this.props.filterFunc({filtered})}
/>
<br />
</div>
);
}
}
我没有检查错别字，但是应该可以。
关于javascript - 使用按钮在React中的react-table上触发过滤器功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48630384/