react-jsonschema-form 的多列支持

Question

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

我正在使用材料用户界面。

Answer 1

我最终使用了这个代码

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

...

Answer 2

对于react-jsonschema-form v5.x，更改列的最简单方法是：

react-jsonschema-form/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

xs={12} xs={6}

<Grid item={true} xs={3} key={index} style={{ marginBottom: '10px' }}>
   {element.content}
</Grid>

你可以留下你的电话号码

Answer 3

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

   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 仅适用于 bootstrap 主题。因为我使用的是 Material ui，所以无法使用这种方法，或者我错过了一些东西来让它运行。

对于更多或更好的解决方案，我真的很感激

Answer 4

主要是，您需要创建一个动态 ObjectFieldTemplate，它接受您在 UI Schema 中传递的列配置。这是一个提供完整解决方案的博客：https://medium.com/p/f45a16ec7021