[英]How to use the search filter from outside the table?
我正在使用antd表。 有沒有辦法可以在表外添加搜索過濾器並仍然在表中搜索?
演示。
我在表格上方添加了一個輸入字段。 但我無法理解如何將其鏈接到antd
可用的搜索功能。 我還為每列添加了搜索過濾器,但也希望在外面有一個單獨的字段。 列過濾器工作正常。
為了便於參考,我還將演示代碼粘貼到此處:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Joe Black",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Jim Green",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
sRT: ""
};
getColumnSearchProps = dataIndex => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder={`Search ${dataIndex}`}
//value={selectedKeys[0]}
onChange={e =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: "block" }}
/>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[this.state.sRT]}
autoEscape
textToHighlight={text.toString()}
/>
)
});
handleSearch = (selectedKeys, confirm) => {
confirm();
this.setState({ sRT: selectedKeys[0] });
};
handleReset = clearFilters => {
clearFilters();
this.setState({ sRT: "" });
};
render() {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "30%",
...this.getColumnSearchProps("name")
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "20%",
...this.getColumnSearchProps("age")
},
{
title: "Address",
dataIndex: "address",
key: "address",
...this.getColumnSearchProps("address")
}
];
return (
<div>
<Input type="text" placeholder="search" />
<Table columns={columns} dataSource={data} />;
<br />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("container"));
您需要添加其他狀態:
dataSource
Input
值的狀態: nameSearch
state = {
sRT: "",
dataSource: data,
nameSearch: ""
};
進行過濾時向Table
組件提供dataSource
:
// Filtered data
<Table columns={columns} dataSource={this.state.dataSource} />
剩下要做的就是添加過濾器組件,這里是三個基本antd
組件的示例:
AutoComplete
Input.Search
Input.Search
AutoComplete
<>
<Row>
<Table columns={columns} dataSource={this.state.dataSource} />
</Row>
<Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
<Col>
<Typography>Name Auto Complete</Typography>
</Col>
<Col>
<AutoComplete
dataSource={data.map(person => person.name)}
onChange={nameSearch =>
this.setState({
dataSource: data.filter(person => person.name.includes(nameSearch))
})
}
allowClear
/>
</Col>
</Row>
<Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
<Col>
<Typography>Name Search</Typography>
</Col>
<Col>
<Input.Search
allowClear
onSearch={nameSearch =>
this.setState({
dataSource: data.filter(person => person.name.includes(nameSearch))
})
}
/>
</Col>
</Row>
<Row type="flex" gutter={10}>
<Col>
<Typography>Auto Complete Search</Typography>
</Col>
<Col>
<AutoComplete dataSource={data.map(person => person.name)}>
<Input.Search
allowClear
onSearch={nameSearch =>
this.setState({
dataSource: data.filter(person =>
person.name.includes(nameSearch)
)
})
}
/>
</AutoComplete>
</Col>
</Row>
</>;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.