时间戳

首页 > 解决方案 > 如何根据 KeystoneJS Next 另一个字段的值在管理 UI 中显示/隐藏字段？

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

问题描述

我有一个Category模型设置schema.ts如下：

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 中呈现这些组件：

管理 UI 中的组件

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

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

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

标签： keystonejs

解决方案

Keystone 4 支持条件字段。他们还没有被带到 Keystone 6（又名“下一个”），但他们在路线图上。我预计对他们的支持将在未来几个月内到来。

现在，在 Keystone 6 中，您可能做的最好的事情就是创建一个自定义字段类型，将“类型”和“来自/到”字段一起收集。这将允许您在管理 UI 中定义一个界面，该界面实现了您喜欢的任何呈现规则。

推荐阅读