如何防止react-json-schema-form中的字段逐行出现

Question

我正在使用 React-json-schema-form 创建表单。我不明白如何更改我创建的表单的布局。它们默认显示在行中，向 uiSchema 中的每个字段添加类并不能反映所需的更改。我尝试添加 col-3 等，但它们既没有改变大小也没有停止出现在行中。

弄清楚它是如此复杂。我的理解是更改字段的默认行为。但是，我确信它应该能够开箱即用地设计，对吗？

这就是我想做的，但它已经过时了，我仍然不知道如何使用它。

https://github.com/audibene-labs/react-jsonschema-form-layout。

如何更改布局？

import React, { Component, Fragment } from "react";
import axios, { existing_api, new_api, public_path } from "../../../Api/api";
import 'bootstrap/dist/css/bootstrap.css';
//import Form from "@rjsf/core"; 
import Form from "@rjsf/bootstrap-4";



class POSView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hotelId: 1,
            isActive: 1,
            formData: { 'recordIn': 10096 },
            schema: props.schema || {
                "title": "POS",
                "description": "Add POS Invoice - Rooms",
                "type": "object",
                "properties": {
                    "customer": { "title": "Customer", "type": 'string', "default": '' },
                    "room": { "title": "Room", "type": 'integer', "default": '' },
                    "address": { "title": "Address", "type": 'string' },
                    "company": { "title": "Company", "type": 'string' },
                    "dueAmount": { "title": "Due Amount", "type": 'string' },
                    "roomRate": { "title": "Room Rate", "type": 'string' },
                    "recordIn": { "title": "Record In", "type": 'number', enum: [10096, 10097], enumNames: ["Guest Ledger Control A/c", "Accounts Receivable"] },
                    "department": { "title": "Department", "type": 'number', enum: [1, 2], enumNames: ["Head Office", "Accounts"] },
                    "id": { "title": "ID", "type": 'string' },
                    "invoiceNumber": { "title": "Invoice Number", "type": 'string' },
                    "invoiceDate": { "title": "Invoice Date", "type": 'string', "format": "date-time" },
                    "btcCompany": { "title": "BTC Company", "type": 'number', enum: [1, 2], enumNames: ["Limited Standard", "Standard Limited"] },


                    "itemsAndServices":
                    {
                        "title": "Item And Service",
                        "description": "Add items and Services",
                        "type": "array",
                        "items": {
                            "type": "object",
                            //"required": [''],
                            "properties":
                            {
                                "Number": { "type": "number" },
                                "Item Name": {
                                    "title": "Item Name",
                                    "type": "string"
                                },
                                "Item Notes": {
                                    "title": "Item Notes",
                                    "type": "string"
                                },
                                "Qty": {
                                    "title": "Qty",
                                    "type": "number"
                                },
                                "Unit": {
                                    "title": "Unit",
                                    "type": "string"
                                },
                                "Price": {
                                    "title": "Price",
                                    "type": "number"
                                },
                                "%": {
                                    "title": "%",
                                    "type": "number"
                                },
                                "Extended": {
                                    "title": "Extended",
                                    "type": "number"
                                }
                            }
                        }
                    },

                    "payment":
                    {
                        "title": "Payment",
                        "description": "",
                        "type": "array",
                        "items": {
                            "type": "object",
                            //"required": [''],
                            "properties":
                            {
                                "date": { "title": "Date", "type": "string", format: "date-time" },
                                "amount": { "title": "Amount", "type": "number" },
                                "cheque": { "title": "Cheque #", "type": "integer" },
                                "memo": { "title": "Memo", "type": "string" },
                                "recordIn": { "title": "Record In", "type": 'number', enum: [10096, 10097], enumNames: ["Guest Ledger Control A/c", "Accounts Receivable"] },
                                // dynamically populate


                            }
                        }
                    }
                }
            },
            uiSchema: props.uiSchema || {
                // customer:{'className':""},
                // room:{'className':"", },
                // address: {'className':"",  "ui:disabled": true, },
                // company: {'className':"",  "ui:disabled": true, },
                // dueAmount: {'className':"",  "ui:disabled": true, },
                // roomRate: {'className':"",  "ui:disabled": true, },
                // recordIn:{'className':"", },
                // department:{'className':"", },
                // id:{'className':"", },
                // invoiceNumber: {'className':"",  "ui:disabled": true, },
                // invoiceDate:{'className':"", },
                // btcCompany:{'className':"", },
                // itemsAndServices:{'className':""},
                //items: { className: "container col-offset-6 col-md-3" }

            //     'ui:field': 'layout', HOW I expected the default library to work
            //     'ui:layout': [
            //         {
            //             customer: { md: 6 },
            //             room: { md: 6 }
            //         }, {
            //             address: { md: 12 }
            //         }, {
            //             company: { md: 6 },
            //             dueAmount: { md: 6 }
            //         }
            //       ]
            // },
            // fields: 
            // {
            //     layout: LayoutField
            }
        };

        this.onChange = this.onChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    };

   

    onChange({ formData }) {
        formData.address = "";
        console.log(formData);
        this.state.schema.description = "this is beta plus plus";

        this.setState({
            formData: formData,

        });
    }

    handleSubmit({ formData }) {
        // Submit to an api
        console.log(formData);
    }



    render() {
        return (
            <div className="container">
                <div className="col-4"> 
                    {/* <div class="row">
                        <h1 class="col">First Form</h1>
                    </div><br /> */}

                    <div>
                        <Form
                            schema={this.state.schema}
                            formData={this.state.formData}
                            uiSchema={this.state.uiSchema}
                            //fields={this.state.fields}
                            onChange={this.onChange}
                            onSubmit={this.handleSubmit} />
                    </div>
                 
                </div>
            </div>
        );
    }


}
export default POSView;

Answer 1

这是不可能的

react-json-schema-form

。但你可以使用 

react-declarative

 因为它支持 css 12 列网格

链接到

游乐场

屏幕截图中的代码。好处是它包含 IDE 自动完成功能，因此您无需谷歌解决方案

import { TypedField, FieldType } from "react-declarative";

export const fields: TypedField[] = [
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "General Information",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "first_name",
        title: 'First Name',
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "last_name",
        title: 'Last Name',
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "middle_name",
        title: "Middle Name",
      },
      {
        type: FieldType.Text,

        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "phone",
        title: "Phone",
        inputFormatterAllowed: /^[0-9]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "additional_phone",
        title: 'Additional Phone',
        inputFormatterAllowed: /^[0-9]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Text,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "email",
        title: 'Email',
      },
      {
        type: FieldType.Items,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "source",
        title: 'Source',
        itemList: ["Telegram", "Facebook", "Instagram"],
      },
      {
        type: FieldType.Items,
        desktopColumns: "4",
        tabletColumns: "4",
        phoneColumns: "12",
        outlined: false,
        name: "looking_for",
        title: "Looking For",
        itemList: ["House", "Garage"],
      },
    ],
  },
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "Passport Information",
      },
      {
        type: FieldType.Text,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "series_number",
        title: "Series Number",
      },
      {
        type: FieldType.Text,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "issued_by",
        title: "Issued By",
        inputFormatterAllowed: /^[0-9 A-Za-z]/,
        inputFormatterTemplate: "000000000000000",
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "birth_date",
        title: 'Birth Date',
      },
      {
        type: FieldType.Combo,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "country",
        title: 'Country',
        defaultValue: "USA",
        itemList: [
          "USA",
          "Turkey",
          "China"
        ],
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "given_date_from",
        title: "Date Issued",
      },
      {
        type: FieldType.Date,
        desktopColumns: "6",
        tabletColumns: "6",
        phoneColumns: "12",
        outlined: false,
        name: "given_date_to",
        title: 'Expiration Date',
      },
    ],
  },
  {
    type: FieldType.Paper,
    fieldBottomMargin: "1",
    fields: [
      {
        type: FieldType.Typography,
        typoVariant: "h6",
        placeholder: "Other",
      },
      {
        type: FieldType.Combo,
        title: 'Profile Status',
        outlined: false,
        itemList: ["First contact", "Active", "Inactive"],
        name: "profile_status",
      },
      {
        type: FieldType.Items,
        outlined: false,
        itemList: ["Group 1"],
        name: "profile_group",
        title: 'Profile Group',
      },
      {
        type: FieldType.Text,
        outlined: false,
        name: "comment",
        title: 'Comment',
        inputRows: 3,
      },
    ],
  },
];