如何在 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;

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

他们的演示也只使用了“label”和“value”属性。

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 组件。

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