1. SimpleForm 设置默认值 defaultValue={}
[cc lang=”js”]const customInput = ({record}) => (input type=”text” />)[/cc]
2 组件隐藏或显示
[cc lang=”js”]
import React from ‘react’;
import { EmailField } from ‘react-admin’;
const ConditionalEmailField = ({ record, …rest }) =>
record && record.hasEmail
?
: null;
export default ConditionalEmailField;[/cc]
——————————————————————
[cc lang=”js”] [/cc]
3 post 一条记录里有个标签数组， 根据 tag_id 查询标签
http://myapi.com/tags?id=[1,23,4] 使用GET_MANY
[cc lang=”js”]
[/cc]
根据post id 查询 这个post 下的 comments ，使用GET_MANY_REFERENCE
comments?post_Id= 12 // 默认会把id 赋给 post_id
————————————–
4 在提交之前更改表单值
https://marmelab.com/react-admin/Actions.html#query-and-mutation-components
https://marmelab.com/react-admin/Actions.html#altering-the-form-values-before-submitting
——————————————————————
5 警告错误 ： Warning: React does not recognize the `basePath` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase `basepath` instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
In order to get rid of the basePath error, just sanitize the props passed to the Material UI Grid Component:
[cc lang=”js”]const SanitizedGrid = ({basePath, …props}) => {
return (
);
};[/cc]
————————————————–
6 数据查询与提交
dataProvider 可以用第四个参数处理 side effect 如 notification
[cc lang=”js”]// in src/comments/ApproveButton.js
import {
– showNotification,
UPDATE,
withDataProvider,
} from ‘react-admin’;
-import { push } from ‘react-router-redux’;
class ApproveButton extends Component {
handleClick = () => {
const { dataProvider, dispatch, record } = this.props;
const updatedRecord = { …record, is_approved: true };
– dataProvider(UPDATE, ‘comments’, { id: record.id, data: updatedRecord })
– .then(() => {
– dispatch(showNotification(‘Comment approved’));
– dispatch(push(‘/comments’));
– })
– .catch((e) => {
– dispatch(showNotification(‘Error: comment not approved’, ‘warning’))
– });
– }
+ dataProvider(UPDATE, ‘comments’, { id: record.id, data: updatedRecord }, {
+ onSuccess: {
+ notification: { body: ‘Comment approved’, level: ‘info’ },
+ redirectTo: ‘/comments’,
+ },
+ onFailure: {
+ notification: { body: ‘Error: comment not approved’, level: ‘warning’ }
+ }
+ })
render() {
return ;
}
}
ApproveButton.propTypes = {
dataProvider: PropTypes.func.isRequired,
– dispatch: PropTypes.func.isRequired,
record: PropTypes.object,
};
export default withDataProvider(ApproveButton);[/cc]
————————————————
7 根据权限显示哪些按钮
[cc lang=”js”]const UserCreateToolbar = ({ permissions, …props }) =>
{permissions === ‘admin’ &&
}
;
export const UserCreate = ({ permissions, …props }) =>
}
defaultValue={{ role: ‘user’ }}
>
{permissions === ‘admin’ &&
}
;[/cc]
//