reactjs - react-admin 上 SimpleForm 组件中的自定义布局
问题描述
我想在编辑和显示页面上的 react-admin 项目上创建一个自定义的两列网格布局。我想在左列显示选择框和图像上传区域,在右列显示文本输入,仅使用一个<SimpleForm>
.
如果我在和组件<Card>
下使用 div 或组件,则会收到错误消息。<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);
推荐阅读
- javascript - 选择比率按钮后更改表格标题
- google-apps-script - 使用带有 StackExchange API 和 Apps 脚本的 OAuth 进行授权时遇到问题
- ember.js - 在 Ember.js 中,如果找不到路由,如何返回硬 404 代码?
- c# - Json Web API 绑定到模型有时会引发异常
- javascript - 将数学公式翻译成 JavaScript
- python - 网页抓取:索引超出范围(可能的缩放错误)
- php - 生成一个唯一的随机数并根据用户订单存储它 - 同时处理请求?
- forms - 无法在此文件夹中创建此类型的项目 Outlook
- javascript - prevState 在 Enzyme 测试中未定义,但在组件中定义
- angular - 如何使用此自定义管道