0

默认情况下，rjsf 将数组项呈现为表单上的单独字段。因此，例如，此架构/布局：

 "jsonSchema" : {
    "type" : "object",
    "required" : [ "test field" ],
    "properties" : {
      "test field" : {
        "title" : "test field",
        "type" : "array",
        "items" : {
          "type" : "string"
        }
      }
    }
  },
  "jsonLayout" : {
    "ui:order" : [ "test field" ],
    "test field" : {
      "ui:widget" : "text_multi",
      "items" : {
        "ui:widget" : "text_multi"
      },
      "ui:disabled" : false,
      "ui:options" : { }
    }
  }

将在其自己的行上渲染每个字符串项以及添加、删除、重新排序按钮。但是我想要实现的是使用 material-ui 的 Autocomplete 元素来处理整个数组，其中一个 Autocomplete 将代表整个数组，并且项目将是其中的芯片。所以，我使用了上面的模式，并定义了这个小部件：

<Autocomplete
        fullWidth
        multiple
        options={[]}
        freeSolo
        onChange={this.handleChange}
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => (
          <MaterialTextField
            {...params}
            variant="outlined"
            error={this.isError()}
            required={this.isRequired()}
            label={this.props.label}
            disabled={this.isDisabled()}/>
        )}
      />

使用handleChange方法传递值数组，如下所示：

  handleChange = (event, value) => {
    console.log('%c multi text value', 'background: orange; color: black;', value);
    this.props.onChange(value);
  }

自动完成按我的预期工作，并将所有输入的值保存到字符串数组中。但是后来当这个值数组被传递到更远的地方时，我从 rjsf 得到一个错误：

在此处输入图像描述

所以，我认为发生的事情是我将数组项指定为字符串，这就是它验证失败的原因。但是有没有办法“欺骗” rjsf 并实现我想要的？rjsf 中的多选也是一个字符串数组，但它作为一个组件可以正常工作，并且不会在新字符串上呈现每个项目......

我尝试使用 ArrayTemplate，但它只允许使用 onAddClickProp 为项目添加新的小部件。

4

0 回答 0