我正在使用 react-jsonschema-form 创建一个表单。单个组件显示正常,但阵列组件连续出现。如何使它们连续出现一个数组对象,以便每次单击 Add button 时,新的数组对象都会呈现在新行中。代码如下:
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}
/>
如下图所示 Array XYZ 对象是固定宽度并彼此相邻显示。我希望它们全宽和新行中的每个对象。我正在使用 React 和 Bootstrap4 很多时候我什至必须通过单击加号按钮来添加第一个对象。我希望第一个对象自己出现。请让我知道我该如何解决。谢谢