react-admin 上 SimpleForm 组件中的自定义布局 [英] Custom layout in SimpleForm component on react-admin

问题描述

我想在我的 react-admin 项目上的编辑"和显示"页面上创建一个自定义的两列网格布局.我想只用一个<SimpleForm>在左栏显示选择框和图片上传区域，在右栏显示文本输入.

就是这样

如果我在 和 组件下使用 div 或 组件，我会收到一个错误.

警告:React 无法识别 DOM 元素上的 `basePath` 属性.如果您有意希望它作为自定义出现在 DOM 中属性，将其拼写为小写的 `basepath`.如果你不小心从父组件传递了它，将它从 DOM 中删除元素.

有没有什么办法可以在没有这个错误的情况下创建布局?

解决方案

我通过使用 div、 等创建另一个组件解决了这个问题，并在 组件.

import {withStyles} from '@material-ui/core/styles';从反应"导入反应；进口 {编辑控制器，简单的模式，文本输入，选择输入，标题，来自反应管理员"；从@material-ui/core/Grid"导入网格；从@material-ui/core/Card"导入卡片；从../customField/Poster"导入海报；从../toolbar/CustomToolbar"导入 {EditToolbar}从../toolbar/CustomActions"导入 {EditActions}const 编辑样式 = {root: {display: 'flex', alignItems: 'flex-start', width: '100%'},形式:{flexGrow:9}，};class CardEdit 扩展了 React.Component {构造函数(道具){超级(道具)；this.state = {刷新:假};}使成为() {const FormDiv = withStyles(editStyles)(({children, classes, ...props}) => {返回 (<div className={classes.root}><div className={classes.form}><网格容器间距={24}><网格项 xs={6}><TextInput source="name" fullWidth/></网格><网格项 xs={6}><TextInput source="card_id" fullWidth/></网格></网格>

)})返回 (<EditController {...this.props}>{({资源，记录，重定向，保存，basePath，版本}) =>{返回 (<div><Title defaultTitle="sample"/><卡片><div style={{ margin: '20px 20px 0 0' }}><编辑操作基路径={基路径}资源={资源}数据={记录}有显示有列表/>

{记录&&(<简单形式基路径={基路径}重定向={重定向}资源={资源}记录={记录}保存={保存}版本={版本}工具栏={<EditToolbar/>}><FormDiv record={record}/></简单表格>)}</卡片>

)}}</EditController>)}}导出默认 withStyles(editStyles)(CardEdit);

I want to create a custom two-column-grid layout on my react-admin project on Edit and Show pages. I want to display selectboxes and the imageupload area on the left column, and the text inputs on the right column by using only one <SimpleForm>.

Simply like this

If I use a div or a <Card> component under <SimpleForm> and <EditController> components, I receive an error.

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.

Is there any way to create a layout without this error?

解决方案

I solved it with creating another component with using divs, <Grid/> etc, and used that component in <SimpleForm> component.

import {withStyles} from '@material-ui/core/styles';
import React from 'react';
import {
    EditController,
    SimpleForm,
    TextInput,
    SelectInput,
    Title,
} from 'react-admin';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Poster from "../customField/Poster";
import {EditToolbar} from '../toolbar/CustomToolbar'
import {EditActions} from '../toolbar/CustomActions'

const editStyles = {
    root: {display: 'flex', alignItems: 'flex-start', width: '100%'},
    form: {flexGrow: 9},
};


class CardEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refresh: false
        };
    }

    render() {
        const FormDiv = withStyles(editStyles)(({children, classes, ...props}) => {
                return (
                    <div className={classes.root}>
                        <div className={classes.form}>
                            <Grid container spacing={24}>
                                <Grid item xs={6}>
                                    <TextInput source="name" fullWidth />
                                </Grid>
                                <Grid item xs={6}>
                                    <TextInput source="card_id" fullWidth />
                                </Grid>
                            </Grid>
                        </div>
                        </div>
                )
            }
        )

        return (
        <EditController {...this.props}>
            {({resource, record, redirect, save, basePath, version}) => {
                return (
                <div>
                    <Title defaultTitle="sample"/>
                    <Card>
                        <div style={{ margin: '20px 20px 0 0' }}>
                            <EditActions
                                basePath={basePath}
                                resource={resource}
                                data={record}
                                hasShow
                                hasList
                            />
                        </div>
                        {record && (
                            <SimpleForm
                                basePath={basePath}
                                redirect={redirect}
                                resource={resource}
                                record={record}
                                save={save}
                                version={version}
                                toolbar={<EditToolbar/>}
                            >

                                <FormDiv record={record} />
                            </SimpleForm>
                        )}
                    </Card>
                </div>
            )
            }}
        </EditController>
        )
    }
}

export default withStyles(editStyles)(CardEdit);

这篇关于react-admin 上 SimpleForm 组件中的自定义布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！