reactjs - 无法使用 react-jsonschema-form-extras 创建 React 表表单

Question

我正在尝试使用 react-jsonschema-form-extras 将 React 表单显示为表格并收到以下错误：

"TypeError: Cannot read property 'tableCols' of undefined"

我正在使用 react-jsonschema-form 和 react-jsonschema-form-extras 创建一个 React 表单。除了 ""ui:field": "table"" 之外，所有功能对我来说都很完美。 请参阅 GitHub 文档。

const schema = {
  "type": "object",
  "properties": {
    "listOfStrings": {
      "type": "array",
      "title": "A list of strings",
      "items": {
        "type": "string",
        "default": "bazinga"
      }
    }
  }
}

const uiSchema = {
  "listOfStrings": {
    "ui:field": "table"
  }
}

const formData = {
  "listOfStrings": [
    "foo",
    "bar"
  ]
}

根据文档，您可以使用 table 而无需任何额外的预定义配置。我还尝试定义表列：

const uSchema = {
  "listOfStrings": {
    "ui:field": "table",
    "table": {
      "tableCols": [
        {
        "dataField": "listOfStrings"
        }
      ]
    }
  }
}

导致以下错误：

"TypeError: Cannot convert undefined or null to object"

Answer 1

您没有正确定义架构。类型对象中的项目又是类型对象，它具有您想要的属性的属性。

沙盒：https ://codesandbox.io/s/silly-satoshi-jt4jw

--

const schema = {
  "type": "object",
  "properties": {
    "listOfStrings": {
      "type": "array",
      "title": "A list of strings",
      "items": {
       "type": "object",
        "properties": {
          string1: { type: "string", default: "bazinga" },
          string2: { type: "string" }
        }
      }
    }
  }
}

const uiSchema = {
  "listOfStrings": {
    "ui:field": "table"
  }
}

const formData = {
  "listOfStrings": [
    "foo",
    "bar"
  ]
}