时间戳

首页 > 解决方案 > 如何使用 AntDesign React 隐藏/显示默认占位符

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

问题描述

我在我的 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 === nullthen 返回没有数据的下拉列表，但我认为这没有意义，因为我会在技术上两次渲染下拉列表。我不知道从这里去哪里。任何帮助将不胜感激。

标签： javascriptreactjsantd

解决方案

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

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

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

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

        </Option>
)}

例如userAnswered可以在哪里。const userAnswered = !!this.state.dropDownSelectAnswers.length

推荐阅读