javascript - 对显示的选择更改选项值使用react

Question

我正在使用 antd 库作为 React 应用程序的一部分。对于选择选项，值从 api 获取并以此格式呈现。

<Select
  {...propsForSelect}
> 
  {this.props.data.map(e => 
     <Option
        key={e.key || e}
        value={e.value || e}
        title={e.title}
      >
        {`${e.key} | ${e.value}`}  
      /Option>
    )}
</Select>

一旦用户选择了一个选项，我只想显示值而不是 {${e.key} | ${e.value}} 值。{${e.key} | ${e.value}} 显示在下拉列表中，当用户选择一个选项时需要单独显示 e.value。

代码沙盒:https://codesandbox.io/s/tender-feynman-uhtn7

Answer 1

这是您要找的吗？

https://codesandbox.io/s/headless-river-1n0e3

基本上我只是为每个流派对象添加了一个 selected 属性，然后在 Select 组件的 onSelect() 属性中，传递了一个回调函数来更新状态并切换将各个流派的 selected 属性设置为 true。

然后，在 UI 中，我只需检查每种类型的 selected 属性是否为真，然后在这种情况下有条件地仅呈现 display 值。