reactjs - react-jsonschema-form 的多列支持

Question

是否有可能使用 https://github.com/rjsf-team/react-jsonschema-form创建多列表单

我正在使用材质ui。

Answer 1

我找到了一个不是我喜欢的解决方案：

   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，所以不能使用这种方法，或者我错过了一些东西来让它运行。

对于更多或更好的解决方案，我真的很喜欢

Answer 2

我最终使用了这段代码

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>
                &nbsp;<Button variant="contained" color="primary">Forgot Password</Button>
            </LSForm>
    </>
);

...