0

我已经开始在 react-jsonschema-form 中构建一个表单，并且在视觉上更改它时遇到了很多困难。该表单是一个数组，它有一个按钮来添加和删除一组输入框。我已经将它构建为一个测试项目中的组件，到目前为止还没有应用 css。

表单将呈现为一个没有按钮空间的小盒子（它们被切断，如下图所示）。

单个元素

第二个元素

它应该如何看待 react-jsonschema-form 游乐场

我的数组和示例数组之间的一个关键区别是每个数组元素有两个文本输入元素。我不知道这是否会导致它。我确实需要有两个输入值作为一组相关的数据，并且两者都是必需的。

这是我的代码：

//json schema
const schema = {
  type: "object",
  properties: {
    listOfNumbers: {
      title: "opret ledig nummerserie",
      type: "array",
      required: ["nr_fra", "nr_til"],
      items: {
        properties: {
          nr_fra: {
            type: "string",
            pattern: "^\\d*$",
            minLength: 8,
            maxLength: 8,
          },
          nr_til: {
            type: "string",
            pattern: "^\\d*$",
            minLength: 8,
            maxLength: 8,
          },
        },
      },
    },
  },
};

//uiSchema
const uiSchema = {
  listOfNumbers: {
    "ui:options": {
      orderable: false,
    },
    items: {
      //nr_fra: { "ui:options": { label: false } },
      //nr_til: { "ui:options": { label: false } },
    },
  },
}

我没有将 css 应用于以下表单。

// Form
<Form
  schema={schema}
  uiSchema={uiSchema}
  formData={this.state.formData}
  onSubmit={(formOutput) => this.handleSubmit(formOutput)}
  transformErrors={transformErrors}
/>

我已经花了一天半的时间试图加强这一点，但我真的可以在如何进行时使用一些帮助。

4

1 回答 1

0

似乎是需要 css 输入来解决这个问题。

下面将元素扩展为适当的大小/形式。

将其发布在这里以供后代使用，因为没有准确记录。

<div className="col-md-offset-3 col-md-6">
    <Form schema={schema} 
          uiSchema={uiSchema}>
    </Form>
</div>
于 2021-01-29T15:49:56.470 回答