如何使用 AntDesign React 隐藏/显示默认占位符答案

【问题标题】：How can I hide / show default placeholder with AntDesign React如何使用 AntDesign React 隐藏/显示默认占位符
【发布时间】：2020-08-03 10:07:55
【问题描述】：

我在我的 React 项目中使用 Ant Design 进行输入。在多输入选择中，我有默认占位符消息“选择一个选项”

      {type === 'select' && (
        <Select
          className={isBlack}
          mode="multiple"
          key={inputKey}
          id={inputKey}
          defaultValue={value}
          disabled={isFixed}
        >
          {!isBlack && (
            <Option
              value=""
              selected
              disabled
              hidden
            >
              <span>Select an option</span>

            </Option>
          )}
          {options.map((option, i) => (
            <Option
              className="ant-drop"
              key={`option_${0 + i}`}
              value={option}
            >{option}
            </Option>
          ))}
        </Select>
      )}

但是，在下拉列表中选择了所有选项后，在没有更多选项可供映射后，我无法弄清楚如何隐藏“选择一个选项”消息。在顶层，我尝试使用 if value === null then 返回没有数据的下拉列表，但我认为这没有意义，因为我会在技术上两次渲染下拉列表。我不知道从这里去哪里。任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我希望我理解正确并且没有太多上下文，您不能尝试以下方法：

显示Select an Option 更多内容
假设一旦用户选择了一个选项，您正在更新一个状态或更新一些东西。当您更新该状态/变量时，我们可以确保隐藏默认选项。

所以显示这个选项会是这样的：

{(!isBlack && userAnswered) (
        <Option
          value=""
          selected
          disabled
          hidden
        >
          <span>Select an option</span>

        </Option>
)}

例如，userAnswered 可以是 const userAnswered = !!this.state.dropDownSelectAnswers.length。

【讨论】：