删除搜索字段reactjs＆＃x2b; Antd
我正在使用ReactJ和ANTD进行搜索。我要做的是，当我删除输入字段时，表将立即重新渲染并显示完整数据，而我不需要按Enter或单击搜索按钮。有什么办法吗？谢谢。
代码在此处
const [dataSource, setDataSource] = useState([])
const handleSearch = (value) => {
let newData = [...data]
const filterData = arrClone.filter((o) => Object.keys(o).some((k) => String(o[k])
.toLowerCase()
.includes(value.toLowerCase())));
setDataSource(filterData);
};
搜索字段和表格
<Row>
<Col lg={24}>
<Search
size='large'
placeholder='Search something'
enterButton='Search'
prefix={<SearchOutlined />}
style={{ borderRadius: 5 }}
allowClear
onSearch={handleSearch}
/>
<Table
columns={columns}
dataSource={dataSource}
rowSelection={rowSelection}
/>
</Col>
</Row>
I am working on the searching of table using ReactJs and Antd. What I want to do is when I delete the input field, the table will immediately re-render and show the full data while I don't need to press Enter or click on the Search button. Is there any way to do that? Thank you.
Code here
const [dataSource, setDataSource] = useState([])
const handleSearch = (value) => {
let newData = [...data]
const filterData = arrClone.filter((o) => Object.keys(o).some((k) => String(o[k])
.toLowerCase()
.includes(value.toLowerCase())));
setDataSource(filterData);
};
Search field and Table
<Row>
<Col lg={24}>
<Search
size='large'
placeholder='Search something'
enterButton='Search'
prefix={<SearchOutlined />}
style={{ borderRadius: 5 }}
allowClear
onSearch={handleSearch}
/>
<Table
columns={columns}
dataSource={dataSource}
rowSelection={rowSelection}
/>
</Col>
</Row>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以将Onchange属性添加到
搜索并将您的Handlesearch函数传递到其中You can add the onChange property to
Searchand pass your handleSearch function into it