Ant Design 选择菜单，希望在选择时只显示部分选项答案

【问题标题】：AntDesign select menu, want to only show part of the option when selectedAnt Design 选择菜单，希望在选择时只显示部分选项
【发布时间】：2021-03-03 08:29:44
【问题描述】：

所以我有这个 AntDesign 选择菜单

<CustomSelect defaultValue={weeklyImp} dropdownMatchSelectWidth={180} dropdownStyle={{textAlign: "center"}} onChange={handleWeeklyImpChange}>
       <Option value="0" >0 - red</Option>
       <Option value="1" >1 - green</Option>
       <Option value="2">2 - blue (after red)</Option>
</CustomSelect>

现在您可以看到的选项列表是0 - red 等。但是，例如，当我单击 1 - green 时，我希望写入该选择框中的值只是 1。

问这个问题很奇怪吗？我在Select docs 的任何地方都找不到它

【问题讨论】：

你检查过Option的title属性吗？
哦，我没有。似乎是我需要的，但它似乎对我不起作用。我在做<Option value="0" title="0" >0 - red</Option>，不是吗？不起作用，仍然在框中显示0 - red
您可以使用 value 属性控制选择框中显示的值。您可以将选定的值推送到状态（在onChange 中），然后使用<Select value={this.state.value.replace(/^\d - /, '') 之类的东西从 value 道具中读取它。如果您知道不需要它们，我认为最好完全删除这些数字并使其类似于<Option value="red">red</Option>
等什么？不，我不想摆脱数字。我对你在做什么感到困惑。您在操作值时使用了Select 组件？不应该是Option 吗？此外，显示值不是 value 道具。显示的值是您在开始标签和结束标签之间写的任何内容。 <Option value="0"> Displayed value <Option />

标签： javascript css reactjs antd

【解决方案1】：

创建这样的状态

const [selectedColor, setSelectedColor] = useState();

你还需要这样的函数

const funcShowOnlyPhoneCode = (value) => {
    setSelectedCode(`${value.substr(0,1)}`);
    console.log('value: ', value);
    return value;
};

然后在 JSX 中添加onChange={funcShowOnlyPhoneCode}

<CustomSelect onChange={funcShowOnlyPhoneCode} defaultValue={selectedColor} dropdownMatchSelectWidth={180} dropdownStyle={{textAlign: "center"}} onChange={handleWeeklyImpChange}>
  <Option value="0" >0 - red</Option>
  <Option value="1" >1 - green</Option>
  <Option value="2">2 - blue (after red)</Option>
</CustomSelect>

【讨论】：