Semantic UI Dropdown下拉框onChange事件无法获取options的text值问题

问题原因 #

你使用的Form.Select（以Semantic UI React组件为例）的onChange回调返回的data对象默认仅包含value字段，不会直接返回对应选项的text属性，因此打印data.text会得到undefined。

解决方案 #

步骤1：抽离下拉选项为公共常量 #

将写在组件props里的options抽成单独的常量，方便后续复用匹配：

const ACKNOWLEDGE_STATUS_OPTIONS = [
  {
    text: 'ACCEPTED',
    value: 'AA',
  },
  {
    text: 'REJECTED',
    value: 'AR',
  }
]

步骤2：修改组件的options配置 #

把组件的options属性替换为上面定义的常量：

<Form.Select
  name='acknowledgementStatus'
  value={this.props.acknowledgementStatusName} //初始值为""
  onChange={this.handleAcknowledgmentStatusChange}
  label='Acknowledgement Status'
  options={ACKNOWLEDGE_STATUS_OPTIONS}
  selectOnBlur={false}
  selectOnNavigation={false}
  icon={
    <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
  }
/>

步骤3：调整onChange函数匹配text值 #

在变更回调中通过拿到的value去选项数组中匹配对应项，取出text：

handleAcknowledgmentStatusChange = (e, data) => {
  // 匹配选中的选项
  const selectedOption = ACKNOWLEDGE_STATUS_OPTIONS.find(item => item.value === data.value)
  const selectedText = selectedOption ? selectedOption.text : ''
  console.log(data.value);
  console.log(selectedText);
  this.props.setAcknowledgeStatus(data.value, selectedText);
};

如果你使用的是其他UI库的下拉组件，解决思路一致：只要拿到选中的value，和你传入组件的源options数组做匹配就能拿到对应的text值。

内容的提问来源于stack exchange，提问作者rudeTool