gpt4 book ai didi

reactjs - React-admin 上的 SimpleForm 组件中的自定义布局

转载 作者:行者123 更新时间:2023-12-03 14:03:12 24 4
gpt4 key购买 nike

我想在编辑和显示页面上的 React-admin 项目上创建自定义两列网格布局。我想仅使用一个 <SimpleForm> 在左列上显示选择框和图像上传区域,并在右列上显示文本输入.

Simply like this

如果我使用 div 或 <Card> <SimpleForm>下的组件和<EditController>组件时,我收到错误。

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.

有什么方法可以创建没有此错误的布局吗?

最佳答案

我通过使用 div 创建另一个组件来解决这个问题,<Grid/>等等,并在 <SimpleForm> 中使用了该组件组件。

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

关于reactjs - React-admin 上的 SimpleForm 组件中的自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53278585/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com