on下拉语义的变化-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' />
}
/>

它的选项有2部分，text和value.文本是在下拉菜单中可见的，但值是我分配的id，从API获取数据。

但文本部分无法更改。下面是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);

希望这对你有帮助!