如何根据 KeystoneJS Next 另一个字段的值在管理 UI 中显示/隐藏字段？答案

【问题标题】：How to show/hide fields in the admin UI depending on the value from another field with KeystoneJS Next?如何根据 KeystoneJS Next 另一个字段的值在管理 UI 中显示/隐藏字段？
【发布时间】：2021-08-31 04:48:17
【问题描述】：

我在schema.ts 中设置了一个Category 模型，如下所示：

Category: list({
  fields: {
    name: text(),
    type: select({
      options: [
        { label: "MultipleChoice", value: "MultipleChoice" },
        { label: "Range", value: "Range" },
      ],
      defaultValue: "...",
      isRequired: true,
      isUnique: true,
      ui: { displayMode: "segmented-control" },
    }),
    from: integer(),
    to: integer(),
    options: text()
  },
})

这会在管理 UI 中呈现这些组件：

我只想在选择Range 时显示from 和to 字段（隐藏options 字段），反之则在选择MultipleChoice 时显示。有没有办法通过 Keystone Next 实现这一目标？

我还尝试了另一种方法，将类别类型拆分为不同的模型，然后以某种方式将它们与Category 模型相关联，但我不知道该怎么做。比如：

CategoryRange: list({
  ui: {
    isHidden: true,
  },
  fields: {
    from: integer(),
    to: integer(),
  },
}),
CategoryMultipleChoice: list({
  ui: {
    isHidden: true,
  },
  fields: {
    options: text(),
  },
})

【问题讨论】：

标签： keystonejs

【解决方案1】：

条件字段为supported in Keystone 4。他们还没有被带到 Keystone 6（又名“下一个”），但他们在 the roadmap。我希望他们的支持会在接下来的几个月内到来。

现在，在 Keystone 6 中，您可能做的最好的事情就是 create a custom field type 将“type”和“from/to”字段收集在一起。这将允许您在管理 UI 中定义一个界面，该界面可以实现您喜欢的任何呈现规则。

【讨论】：