Javascript 如何在ReactJS中使用特定值进行下拉？

我正在使用

PrimeReact

的

下拉列表

我有这个代码，但在
下拉列表中
我只显示
标签
，而不是
名称

我怎么能​​在
下拉菜单中显示
选项search
变量的每个元素的名称以选择这些名称

import React, {Component} from 'react';
import {Dropdown} from 'primereact/components/dropdown/Dropdown';

class OptionsExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      optionsSearch: 'FORM_FIELDS'
    };
  }

  onOptionChange = e => {
    this.setState({optionsSearch: e.value});
  }

  render() {
    const optionsSearch = [
      {key: 'NAME1', name: 'NAME1', label: 'DESCRIPTION1'},
      {key: 'NAME2', name: 'NAME2', label: 'DESCRIPTION2'},
      {key: 'NAME3', name: 'NAME3', label: 'DESCRIPTION3'}
    ];

    return (
      <div>
        <div className='ui-g-12 ui-md-12 ui-lg-12'>
          <Dropdown value={this.state.optionsSearch} options={optionsSearch} onChange={this.onOptionChange} style={{width: '180px'}} placeholder={`${this.state.optionsSearch}`} />
        </div>
      </div>
    );
  }
}

export default OptionsExample;

import React，{Component}来自'React'；
从'primereact/components/Dropdown/Dropdown'导入{Dropdown}；
类选项示例扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项搜索：“表单\字段”
};
}
onOptionChange=e=>{
this.setState（{optionsearch:e.value}）；
}
render（）{
常量选项搜索=[
{key:'NAME1'，name:'NAME1'，label:'DESCRIPTION1'}，
{key:'NAME2'，name:'NAME2'，label:'DESCRIPTION2'}，
{key:'NAME3'，name:'NAME3'，label:'DESCRIPTION3'}
];
返回(
);
}
}
导出默认选项示例；
此代码是从PrimeReact源代码复制的，用于下拉列表


因此，如果你想显示“名称”，你必须把它放在标签上

他们的演示还仅使用“label”和“value”属性


编辑@Chris G的学分

您也可以呈现自定义内容，但随后必须将模板函数传递给下拉列表

他们的演示展示了这一点

carTemplate(option) {
    if(!option.value) {
        return option.label;
    }
    else {
        var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';

        return (
            <div className="ui-helper-clearfix">
                <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
                <span style={{float:'right',margin:'.5em .25em 0 0'}}>{option.label}</span>
            </div>
        );
    }
}

carTemplate（选项）{
如果（！option.value）{
返回选项.label；
}
否则{
var logoPath='showcase/resources/demo/images/car/'+option.label+'.png'；
返回(
{option.label}
);
}
}

然后他们将其传递给下拉组件

<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} itemTemplate={this.carTemplate} style={{width:'150px'}} placeholder="Select a Car"/>


将
optionLabel=“name”
添加到您的
中。我只是需要它！非常感谢你！！第二个演示使用的格式是
{name:'newyork'，code:'NY'}
，如果
name
按要求声明为
optionLabel
，则效果非常好。哦，对了，很好。看起来库需要一些模板才能呈现自定义内容。非常感谢您的帮助。我知道这个演示，但我无法让它工作。我只需要在@christopher_pk How to add key属性中添加optionLabel=“name”以避免错误-遇到两个具有相同密钥的子级。键应该是唯一的，以便组件在整个更新过程中保持其标识。
carTemplate(option) {
    if(!option.value) {
        return option.label;
    }
    else {
        var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';

        return (
            <div className="ui-helper-clearfix">
                <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
                <span style={{float:'right',margin:'.5em .25em 0 0'}}>{option.label}</span>
            </div>
        );
    }
}

<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} itemTemplate={this.carTemplate} style={{width:'150px'}} placeholder="Select a Car"/>