[英]Custom layout in SimpleForm component on react-admin
我想在“編輯”和“顯示”頁面上的 react-admin 項目上創建自定義的兩列網格布局。 我想只使用一個<SimpleForm>
在左列顯示選擇框和圖像上傳區域,在右列顯示文本輸入。
如果我在<SimpleForm>
和<EditController>
組件下使用 div 或<Card>
<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);
實際上,如果您不需要任何自定義樣式,那么這可以更容易一些。 為了擺脫 basePath 錯誤,只需清理傳遞給 Material UI Grid 組件的道具:
const SanitizedGrid = ({basePath, ...props}) => {
return (
<Grid {...props} />
);
};
然后用它代替普通的 Grid:
export default props => (
<SimpleForm {...props}>
<SanitizedGrid container spacing={16}>
<Grid item xs>
<TextInput source="name" />
</Grid>
</SanitizedGrid>
</SimpleForm>
);
作為另一種方式,我剛剛找到了(感謝 Alexander 的回答)一種很好的通用方法,可以將任何自定義 HTML 內容添加到 react-admin 表單中:
import React, { Fragment } from 'react';
import { SimpleForm } from 'react-admin';
const CustomContent = ({ basePath, record, resource, children }) => (
<Fragment>
{children}
</Fragment>
);
export const MyForm = (props) => (
<SimpleForm>
<CustomContent>
<h3>Custom Content</h3>
<p>I can now add standard HTML to my react admin forms!</p>
</customContent>
</SimpleForm>
);
您獲得了 basePath 道具(您可能不想要),但記錄和資源道具可能對您的自定義內容有用(如果您將代碼切換為使用渲染道具)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.