AntDesign 选择菜单，希望在选中时只显示部分选项-解网

问：

所以我有这个 AntDesign Select 菜单

<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 - red1 - green1

这有什么奇怪的问法吗？我在选择文档的任何地方都找不到它

javascript css reactjs antd

您可以使用其属性控制选择框中的显示值。您可以将所选值推送到 state （in ）中，然后从 value prop 中读取它，例如 .我认为最好完全删除这些数字，让它就像你知道你不需要它们一样valueonChange<Select value={this.state.value.replace(/^\d - /, '')<Option value="red">red</Option>

0赞 Saif eldeen Adel 3/3/2021

等什么？不，我不想摆脱这些数字。我对你在做什么感到困惑。您在操作值时使用了该组件？那不应该是吗？此外，显示值不是值属性。显示的值是您在开始和结束标记之间写入的任何内容。SelectOption<Option value="0"> Displayed value <Option />

答：

1赞 Caleb C. Adainoo 1/8/2022 #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>

0赞 Redwan Hossen Rafsan 10/1/2022 #2

您可以通过使用 in 并在labelOptionoptionLabelPropSelect

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

上一个：AntDesign 表单中的自定义输入字段 - “组件正在更改要控制的不受控制的输入。

下一个：&& if 在 bash 脚本 [duplicate] 中

AntDesign 选择菜单，希望在选中时只显示部分选项

AntDesign select menu, want to only show part of the option when selected

评论