如何使用React Admin访问抽屉级别的记录属性

Question

我使用"列表"页面抽屉中的"编辑表单"，并尝试从那里找到访问记录或筛选属性的方法，但没有成功。。我需要将match.params.id替换为coupond id({id : { id : 1, category : 2}}(，因为我的标记资源是一个以类别作为输入参数的存储过程你知道吗？

样本代码：

import { connect } from 'react-redux';
import compose from 'recompose/compose';
import { push } from 'react-router-redux';
import { withStyles } from '@material-ui/core';
import { Datagrid, List, TextField, EditButton, Filter, TextInput } from 'react-admin';
import React from 'react';
import { Route } from 'react-router';
import { Drawer } from '@material-ui/core';
import TagEdit from './TagEdit';
const styles = {
drawerContent: {
width: 300
}
};
const TagFilters = (props) => (
<Filter {...props} variant="standard">
<TextInput label="Category" source="category" alwaysOn />
<TextInput label="Name" source="name" alwaysOn />
</Filter>
);
class TagList extends React.Component {
render() {
const { push, classes, ...props } = this.props;
return (
<Fragment>
<List
{...props}
sort={{ field: 'name', order: 'ASC' }}
filters={<TagFilters />}
>
<Datagrid>
<TextField source="category" />
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
<Route path="/tags/:id">
{({ match }) => {
const isMatch =
match &&
match.params &&
match.params.id !== 'create';
return (
<Drawer
open={isMatch}
anchor="right"
onClose={this.handleClose}
>
{isMatch ? (
<TagEdit
className={classes.drawerContent}
id={isMatch ? match.params.id : null} // <------------- here I'd like to access to row record object or filter value ----------------------
onCancel={this.handleClose}
{...props}
/>
) : (
<div className={classes.drawerContent} />
)}
</Drawer>
);
}}
</Route>
</Fragment>
);
}
handleClose = () => {
this.props.push('/tags');
};
}
export default compose(
connect(undefined, { push }),
withStyles(styles)
)(TagList);```

Answer 1

好吧，我自己回复，事实上很容易：

const getFilterValues = (state, resource) => {
let values = undefined;
if (!state || !resource) return values;
let filterJSON =
state.router &&
state.router.location &&
state.router.location.query &&
state.router.location.query.filter;
if (filterJSON) {
let filters = JSON.parse(decodeURIComponent(filterJSON));
if (filters) {
values = filters;
}
}
else {
filterJSON =
state.admin &&
state.admin.resources &&
state.admin.resources[resource] &&
state.admin.resources[resource].list &&
state.admin.resources[resource].list.params &&
state.admin.resources[resource].list.params.filter;
if (filterJSON) {
values = filterJSON;
}
}
return values;
};
const mapStateToProps = (state, props) => {
let filters = getFilterValues(state, 'tags');
return {
...props,
filters
};
};
const CustomTagList = connect(
mapStateToProps,
)(TagList); 

别忘了更改最后几行代码：

export default compose(
connect(undefined, { push }),
withStyles(styles)
)(CustomTagList);```

现在您在TagEdit中有了props.filters值。：(