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

Question

所以我有这个 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 - red等。但是当我单击1 - green时，我希望 select 框中写入的值仅为1 。

这么问有什么奇怪的吗？ 我真的无法在Select 文档的任何地方找到它

Answer 1

像这样创建一个 state

const [selectedColor, setSelectedColor] = useState();

您还需要像这样的 function

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>

Answer 2

您可以通过在Option中使用label并在Select optionLabelProp

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