react-admin UI

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]