下拉语义的onChange -ui不工作

Question

我在一个react应用程序上工作，我有一个带有3-4个值的下拉列表，但当我试图更改它时，我只能访问选项的值部分，而不能访问文本部分。

这是我的表单组件：

<Form.Select
              name='acknowledgementStatus'
              value={this.props.acknowledgementStatusName} //"" initially 
              onChange={this.handleAcknowledgmentStatusChange}
              label='Acknowledgement Status'
              options={[
                {
                  text: 'ACCEPTED',
                  value: 'AA',
                },
                {
                  text: 'REJECTED',
                  value: 'AR',
                },
              ]}
              selectOnBlur={false}
              selectOnNavigation={false}
              icon={
                <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
            />

它的选项有两个部分，text和value.The文本在下拉列表中是可见的，但值是我分配给从API获取数据的id。

但文本部分不能更改。下面是onChange函数：

handleAcknowledgmentStatusChange = (e, data) => {
    console.log(data.value);
    console.log(data.text);
    this.props.setAcknowledgeStatus(data.value, data.text);
  };

以上更改函数的console.log输出如下：

AR
undefined

Answer 1

假设您的value是唯一的，您可以从data.options获取text的值

const { text } = data.options.find(option => option.value === data.value);

希望这能有所帮助！