onChange of Drop down semantic-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。文本是下拉列表中可见的内容，但值是我分配的用于从 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);

希望对您有所帮助！

onChange of Drop down semantic-ui 不工作

onChange of Drop down semantic-ui not working

javascript

reactjs

drop-down-menu

semantic-ui

react-props