如何在响应管理框架中重置过滤器值？
如何在响应管理框架中重置过滤器值？
提问于 2018-10-22 09:37:53
我有一个过滤器组件：
export const PostsFilter = (props) => (
<Filter {...props}>
<TextInput label='Post ID' source='id' alwaysOn />
<TextInput label='User ID' source='user_id' alwaysOn />
</Filter>
);我需要添加一个重置按钮，以清除输入值。我知道应该通过发送smth到redux来完成in。也许有人已经解决了这个问题？谢谢!
回答 4
Stack Overflow用户
发布于 2019-05-30 09:46:23
不幸的是，setFilters没有为我做任何事情。以下是问题的解决办法：
<FormDataConsumer form={'filterForm'} alwaysOn source='stateId'>
{({ formData, dispatch, ...rest }) => (
<ReferenceInput
resource={props.resource}
source='stateId'
reference='states'
onChange={value => {
dispatch(change('filterForm', 'districtId', null));
}}
allowEmpty>
<SelectInput optionText='name' />
</ReferenceInput>
)}
</FormDataConsumer>
{(props.filterValues.stateId || props.filterValues.districtId) && (
<ReferenceInput
key={props.filterValues.stateId}
source='districtId'
reference='districts'
filter={{ stateId: props.filterValues.stateId }}
alwaysOn>
<SelectInput optionText='name' />
</ReferenceInput>
)}Stack Overflow用户
发布于 2020-11-26 02:09:05
下面是我如何创建一个“清除过滤器”按钮("react-admin": "3.10.2")。
延伸到 toolbar example..。
import { FilterList } from "@material-ui/icons";
import React from "react";
import {
Button,
sanitizeListRestProps,
TopToolbar
} from "react-admin";
const ListActionsTopToolbar = (props) => {
const {
className,
exporter,
filters,
maxResults,
setFilters,
...rest
} = props;
return (
<TopToolbar className={className} {...sanitizeListRestProps(rest)}>
{/* Clear Filters Button */}
<Button onClick={() => setFilters({})} label="Clear Filters">
<FilterList />
</Button>
</TopToolbar>
);
};追溯：https://github.com/marmelab/react-admin/issues/816#issuecomment-734030723
Stack Overflow用户
发布于 2018-10-31 00:11:13
听起来，您想要清除TextInput中的值，它不需要redux来查看您给我们的内容。
使用的方法之一是通过onChange()函数将筛选器输入保存到状态--这可能也是您调用操作以访问后端或更改道具中的帖子的状态的地方。
要重置，您可以在onClick()中有另一个按钮调用一个handleReset(inputId)，您可以在该按钮上调用setState({filterUser: 'testUser123'})，这将满足您的要求。
虽然这取决于你想要如何处理这一切，但没有足够的信息来了解你是如何做到的，所以我只是在猜测人们的一种常见方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52926290
复制相关文章
相似问题
腾讯云开发者
