Как сделать выпадающий с конкретными значениями в ReactJS?

Question

Я использую Dropdown из PrimeReact,

У меня есть этот код, но в Dropdown Я только могу показать label а не name,

Как я могу отобразить название каждого элемента optionsSearch переменная в Dropdown меню для выбора этих имен?

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/

РЕДАКТИРОВАТЬ кредиты @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"/>