覆盖 BaseWeb/baseui Select 标签

Override BaseWeb/baseui Select label

我需要显示选择的选项数量而不是实际选择的选项。这是我想要实现的目标,我通过在浏览器检查中操纵 DOM 创建了一个模型。

在baseweb/baseui文档中,提到可以通过覆盖来实现,但是,当我使用覆盖属性时,它会影响样式和行为,因为您可以取消注释并看到结果。

这是代码片段: https://codesandbox.io/s/nifty-johnson-erkfr

我在 Baseweb Slack 频道中问了同样的问题,这里是其中一个人的回答。

          overrides={{
            MultiValue: {
              component: (data) => {
                if (selectedOption.length) {
                  const isFirst = selectedOption[0].id === data.value.id;
                  if (isFirst) {
                    return <Tag {...data} closeable={false}>{selectedOption.length} Selected</Tag>
                  }
                }
                return null
              }
            }
          }}

希望它能节省别人的时间。