如何使用 React-Admin 在抽屉级别访问记录属性？答案

【问题标题】：How to access to record properties at drawer level with React-Admin?如何使用 React-Admin 在抽屉级别访问记录属性？
【发布时间】：2022-01-24 12:02:39
【问题描述】：

我在列表页面的抽屉中使用编辑表单，但我尝试找到一种从那里访问记录或过滤器属性的方法，但没有成功。我需要将 match.params.id 替换为 coupound id ({id : { id : 1, category : 2}})，因为我的 Tag ressource 是一个以 category 作为输入参数的存储过程你有什么想法吗？

示例代码：

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);```

【问题讨论】：

标签： reactjs filter react-admin drawer

【解决方案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 值。 :)

【讨论】：