react-jsonschema-form 折叠我的数组表单的大小并切断按钮

问题描述

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

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

How its supposed to look on react-jsonschema-form playground

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

这是我的代码：

//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",};

//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}
          ></Form>

我已经花了一天半的时间来试图加强这一点，但我真的可以在如何继续方面提供一些帮助。

解决方法

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

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

在此发布以供后人使用，因为没有准确记录。

<div className="col-md-offset-3 col-md-6">
    <Form schema={schema} 
          uiSchema={uiSchema}>
    </Form>
</div>

jsonschema react-jsonschema-forms reactjs reactjs reactjs reactjs