Question

我正在使用react-jsonschema-form创建一个表单。单个组件显示良好，但阵列组件排成一行。如何使它们连续显示一个数组对象，以便每次单击“添加”按钮时，都会在新行中呈现新的数组对象。代码如下：

    const schema = {
  type: "object",
  properties: {
    Name: { type: "string", title: "Name", default: "A new Task" },
    Title: { type: "object", properties: { First: { type: "string" }, Second: { type: "string" } } },
    XYZ: { type: "array", items: { type: "object", properties: { Third: { type: "string" }, Forth: { type: "boolean", enum: [true, false], enumNames: ["True", "False"] } } } }
  }
}

const uiSchema = {
  "ui:order": ["Name", "Title", "Done"],
  Name: { "ui:widget": "textarea" },
  Title: { First: { "ui:widget": "textarea" }, Second: { "ui:widget": "textarea" } },
  XYZ: { items: { Third: { "ui:widget": "textarea" }, Forth: { "ui:widget": "radio", "ui:options": { inline: true } } }, "ui:options": { orderable: false, removable: true, inline: false } }
}

表单代码如下：

<Form schema={schema}
              // formData = {defaultData}
              uiSchema={uiSchema}
              onChange={log("changed")}
              onSubmit={SubmitRoutine}
              onError={ErrorRoutine}
            />

如下图所示，XYZ阵列对象是固定宽度的，并且彼此相邻显示。我要它们全宽，并让新行中的每个对象。我正在使用React和Bootstrap4 同样，我什至需要单击“加号”按钮添加第一个对象。我希望第一个对象出现。请让我知道如何解决。谢谢

Answer 1

结帐this库。它允许使用bootstrap-grid布置表单。

Answer 2

只要不需要在模型中反映顺序，就可以使用pure CSS来实现：

/* class of a wrapping element */
.array-item-list {
    display: flex;
    /* column, column-reverse, row, row-reverse */
    flex-direction: column-reverse;
}

如何使数组类型架构对象连续出现？ react-jsonschema-form

2 个答案: