Как сделать так, чтобы объекты схемы типа массива отображались один в ряд? React-jsonschema-form

Я использую response-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 введите описание изображения здесь Также очень раз мне приходится добавлять первый объект, нажимая кнопку" Плюс ". Я хочу, чтобы первый объект появился сам. Пожалуйста, дайте мне знать, как я могу это исправить. Спасибо


reactjs bootstrap-4 react-jsonschema-forms
person XEnterprise    schedule 08.09.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ознакомьтесь с этой библиотекой. Это позволяет разложить вашу форму с помощью bootstrap-сетки.

person Farhan Haider    schedule 25.02.2019

arrow_upward
0
arrow_downward

Этого можно добиться с помощью чистого CSS, предоставленного там. нет необходимости отражать порядок в модели:

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