- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我不知道怎么说。我正在学习 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>
);
//我有一个类 Directory extends Component,里面有 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 表。我不想要始终使用的输入字段选项,因为我只想要按钮,因为用户没有键盘,只能触摸。
基本上,React Table 或任何可以通过单击带有传递回过滤器的字母的按钮来过滤的表格。如果我使用的是 JQuery,我会使用单击按钮然后以这种方式进行过滤。我仍然没有了解 React 的所有细节以及如何完成它。我也想使用外部按钮进行排序,但希望这应该更容易。
谢谢。对不起,如果所有这些都没有意义,我只是想把它摆出来。同样,没有键盘,只能在触摸屏上触摸,因此输入字段对我不起作用。
最佳答案
要通过按钮从外部控制 React-Table 过滤器,您应该查看 Controlled Table例子。然后表格组件变成了一个 controlled component.
在那里,您可以在外部设置表格过滤器的状态并使用这两个属性:
<ReactTable ...(your other props)
filtered={this.state.filtered}
onFilteredChange={filtered => this.setState({ filtered })}
/>
filtered
属性将监视状态的变化。因此,每当您通过字母按钮更新其值时,例如
this.setState({filtered: { id: "dName", value: "A"}})
表格的过滤器将得到更新。此外,onFilteredChange 应该在另一个方向工作,即 react 表的嵌入式过滤可以更新本地状态。这样您就可以监视它并在您的 DataGrid 组件中使用它的值。
不过,另一种选择可能是避免使用本地状态并在 redux 中实现它。因为组件周围的状态最终会成为错误的来源并增加调试的复杂性。
更新——根据问题所有者的评论了解更多详情:
为了同时使用 FilterButtons 和 DataGrid,您可以定义一个封装 FilterButtons 和 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 组件中使用 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 中使用 Buttons 触发 react-table 上的过滤功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48630384/
我遇到过这个 html: 上面的html和这个有什么区别: 最佳答案 来自MDN page on the tag : 对于 type 的属性标签,可能的值是: 提交:按钮将表单数据提交给服务器
Button button= (Button) findViewbyID(R.id.button); 和 Button button = new Button(this); 有什么区别? 最佳答案 有
我是一名优秀的程序员,十分优秀!