如何丰富样式 AOR 编辑页面 [英] How to richly style AOR Edit page
问题描述
必须创建一个编辑页面，在故事"资源的实例上编辑多个参数.
但是，添加任何元素(例如 MUI 卡甚至 div)都会导致应用以各种方式冻结.
这些是我尝试过的方法.
1) 添加卡片组件或将我的元素放在 div 中以进行样式设置
export const EditorEditTale = (props) =>{返回 (<Edit {...props} title="故事编辑器"><简单表格><div><图片/><TaleCardHeader props={ props } style={taleCardHeaderStyle.editor}/></简单表格></编辑>)};
这不会导致任何渲染.
第二种方法，假设记录和 basePath 没有完全传播给孩子.尝试使用如下组件.
const Input = ({record, basePath}) =>{返回 (<div><LongTextInput source="taleText"/>)}
这导致页面无法在某种锁定循环中呈现所有内容并出现错误 - 无法读取未定义的属性.
我应该如何创建具有复杂输入和样式的自定义编辑页面.
更新:到目前为止，一直在尝试编写自定义表单来替换 SimpleForm 组件，但没有成功.
要创建自定义表单，您可以按照以下步骤操作:
- 制作的精确副本SimpleForm 到您的项目.
- 将 SimpleForm 重命名为您想要的名称.
- 修复所有相关导入.
- 测试新表单直到它工作.
我根据当前 master 分支的 简单表格
import React, { Children, Component } from 'react';从 'prop-types' 导入 PropTypes；import { reduxForm, Field } from 'redux-form';从'react-redux'导入{连接}；从 'recompose/compose' 导入 compose；从 'admin-on-rest/mui/form/getDefaultValues' 导入 getDefaultValues；从 'admin-on-rest/mui/form/FormField' 导入 FormField；从 'admin-on-rest/mui/form/Toolbar' 导入工具栏；const formStyle = { padding: '0 1em 1em 1em' };导出类 PostForm 扩展组件 {handleSubmitWithRedirect = (redirect = this.props.redirect) =>this.props.handleSubmit(values => this.props.save(values, redirect));使成为() {const { 孩子，无效，记录，资源，basePath，submitOnEnter，工具栏 } = this.props;返回 (<form className="simple-form"><字段名称="name_of_a_field" 组件="输入"/>{工具栏&&React.cloneElement(工具栏，{handleSubmitWithRedirect: this.handleSubmitWithRedirect,无效的，提交输入，})}</表单>);}}PostForm.propTypes = {basePath: PropTypes.string,孩子:PropTypes.node，默认值:PropTypes.oneOfType([PropTypes.object,PropTypes.func,]),handleSubmit: PropTypes.func,//通过 redux-form 传递无效:PropTypes.bool，记录:PropTypes.object，资源:PropTypes.string，重定向:PropTypes.oneOfType([PropTypes.string,PropTypes.bool，]),save: PropTypes.func,//在parent中定义的handler，触发REST提交submitOnEnter: PropTypes.bool,工具栏:PropTypes.element，验证:PropTypes.func，};PostForm.defaultProps = {submitOnEnter: 真,工具栏:<工具栏/>,};const 增强 = compose(连接((状态，道具)=>({初始值:getDefaultValues(状态，道具)，})),reduxForm({形式:'记录形式'，启用重新初始化:真，}),);导出默认增强(PostForm)；以上代码适用于 AOR 的example.
我希望这会有所帮助.
(当您将 AOR 作为 npm 依赖项时，导入可能略有不同:
从'admin-on-rest/lib/mui/form/getDefaultValues'导入getDefaultValues；从 'admin-on-rest/lib/mui/form/FormField' 导入 FormField；从 'admin-on-rest/lib/mui/form/Toolbar' 导入工具栏；)
Have to create an edit Page editing a number of parameters on an instance of a'tale' resource.
However adding any element such as an MUI Card or even a div, is causing the app to freeze in various ways.
These are the approaches I have tried.
1) Adding a card component or placing my elements within a div for styling
export const EditorEditTale = (props) => {
return (
<Edit {...props} title="Tale Editor">
<SimpleForm >
<div>
<Image />
<TaleCardHeader props={ props } style={taleCardHeaderStyle.editor} />
</div>
</SimpleForm>
</Edit>
)
};
This is causing nothing to render.
Second approach, assuming that the record and basePath arent getting propagated to the children completely. Trying to use component like below.
const Input = ({record, basePath}) => {
return (
<div>
<LongTextInput source="taleText" />
</div>
)
}
This is causing the page to not render with everything in some kind of locking loop with the error - cannot read property touched of undefined.
How should I create a custom Edit page with a complex inputs and styling.
UPDATE: Been trying to write a custom form to substitute the SimpleForm component with no luck so far.
To create a custom form you can follow these steps:
- make an exact copy of SimpleForm to your project.
- rename SimpleForm to what you want.
- fix all the relative imports.
- test the new form until it works.
I made a minimum working form based on current master branch's SimpleForm
import React, { Children, Component } from 'react';
import PropTypes from 'prop-types';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import getDefaultValues from 'admin-on-rest/mui/form/getDefaultValues';
import FormField from 'admin-on-rest/mui/form/FormField';
import Toolbar from 'admin-on-rest/mui/form/Toolbar';
const formStyle = { padding: '0 1em 1em 1em' };
export class PostForm extends Component {
handleSubmitWithRedirect = (redirect = this.props.redirect) => this.props.handleSubmit(values => this.props.save(values, redirect));
render() {
const { children, invalid, record, resource, basePath, submitOnEnter, toolbar } = this.props;
return (
<form className="simple-form">
<Field name="name_of_a_field" component="input" />
{toolbar && React.cloneElement(toolbar, {
handleSubmitWithRedirect: this.handleSubmitWithRedirect,
invalid,
submitOnEnter,
})}
</form>
);
}
}
PostForm.propTypes = {
basePath: PropTypes.string,
children: PropTypes.node,
defaultValue: PropTypes.oneOfType([
PropTypes.object,
PropTypes.func,
]),
handleSubmit: PropTypes.func, // passed by redux-form
invalid: PropTypes.bool,
record: PropTypes.object,
resource: PropTypes.string,
redirect: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
save: PropTypes.func, // the handler defined in the parent, which triggers the REST submission
submitOnEnter: PropTypes.bool,
toolbar: PropTypes.element,
validate: PropTypes.func,
};
PostForm.defaultProps = {
submitOnEnter: true,
toolbar: <Toolbar />,
};
const enhance = compose(
connect((state, props) => ({
initialValues: getDefaultValues(state, props),
})),
reduxForm({
form: 'record-form',
enableReinitialize: true,
}),
);
export default enhance(PostForm);
The above code works for AOR's example.
I hope this helps.
(import might be slightly different when you have AOR as npm dependency :
import getDefaultValues from 'admin-on-rest/lib/mui/form/getDefaultValues';
import FormField from 'admin-on-rest/lib/mui/form/FormField';
import Toolbar from 'admin-on-rest/lib/mui/form/Toolbar';
)
这篇关于如何丰富样式 AOR 编辑页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
