如何在 ReactJS 中使用特定值制作下拉列表?

Question

我正在使用PrimeReact的Dropdown。

我有这段代码，但在Dropdown中我只能显示label而不是name。

如何在Dropdown菜单中显示optionsSearch变量的每个元素的名称以选择这些名称？

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;

Answer 1

此代码是从 PrimeReact 源代码中复制的，用于下拉列表。

https://github.com/primefaces/primereact/blob/master/src/components/dropdown/DropdownItem.js

render() {
let className = classNames('ui-dropdown-item ui-corner-all', {
'ui-state-highlight': this.props.selected,
'ui-dropdown-item-empty': (!this.props.label || this.props.label.length === 0)
});
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
return (
<li className={className} onClick={this.onClick}>
{content}
</li>
);
}

如您所见，正在为每个仅包含"标签"的下拉项呈现{content}。

let content = this.props.template ? this.props.template(this.props.option) : this.props.label;

因此，如果要显示"名称"，则必须将其放在标签中。

他们的演示也仅使用"标签"和"值"属性。

https://www.primefaces.org/primereact/#/dropdown

编辑演职员表 @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>
);
}
}

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

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