问题描述
是否可以使用 https://github.com/rjsf-team/react-jsonschema-form
我正在使用材料ui。
解决方法
我找到了一个我不喜欢的解决方案:
const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
return (
<div>
{props.title}
{props.description}
{props.properties.map(element => {
return <div className="property-wrapper">{element.content}</div>
})}
</div>
);
}
<Form ObjectFieldTemplate={ObjectFieldTemplate}>
调查几个小时的搜索后,我发现了另一个解决方案:
const uiSchema = {
"email": {
"ui:widget": "email",'ui:column': 'xs6'
},"password": {
"ui:widget": "password",'ui:column': 'xs6'
}
};
这里的问题:ui:coumn:xs6仅适用于引导主题。因为我使用的是材料ui,所以无法使用这种方法,或者我错过了使它运行的方法。
对于更多或更好的解决方案,我会非常推荐
,我最终使用了这段代码
import * as React from "react";
import Form from "@rjsf/material-ui";
import {FormProps,ObjectFieldTemplateProps} from "@rjsf/core";
import Button from "@material-ui/core/Button/Button";
import styles from './LSForm.module.scss';
import Grid from "@material-ui/core/Grid/Grid";
interface Props extends FormProps<any> {
submitButtonText?: string
showSuccessMessage?: boolean
hide?: boolean
columns?: number
spacing?: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined
}
const LSForm: React.FC<Props> = (props) => {
const getColumns = () => {
if (props.columns === 1) {
return 12;
}
if (props.columns === 2) {
return 6;
}
if (props.columns === 3) {
return 4;
}
if (props.columns === 4) {
return 3;
}
// Default one colum
return 12;
};
const getSpacing = (): 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined => {
let spacing: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined = 0;
if (props.spacing != null) {
spacing = props.spacing;
}
return spacing;
};
const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
return (
<div>
<Grid container spacing={getSpacing()}>
{props.title}
{props.description}
{props.properties.map(element => {
return <Grid item xs={getColumns()}><div className="property-wrapper">{element.content}</div></Grid>
})}
</Grid>
</div>
);
};
return (
<>
{ !props.hide &&
<Form {...props} ObjectFieldTemplate={ObjectFieldTemplate}>
{ props.children &&
<div className={styles.actionBar}>
{props.children}
</div>
}
{ !props.children &&
<div className={styles.actionBar}>
<Button type={"submit"} disabled={props.disabled} variant="contained" color="primary">{ props.submitButtonText ? props.submitButtonText : "Speichern"}</Button>
</div>
}
</Form>
}
</>
);
};
export default LSForm;
按以下方式使用: ...
return (
<>
<LSForm schema={schema}
hide={hideForm}
spacing={3}
columns={3}
uiSchema={uiSchema}
onSubmit={(data) => onSubmit(data)}>
<Button type={"submit"} variant="contained" color="primary">Login</Button>
<Button variant="contained" color="primary">Forgot Password</Button>
</LSForm>
</>
);
...