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;

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

他们的演示还仅使用“标签”和“值”属性。

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"/>

如何在ReactJS中使用特定值创建下拉列表？

1 个答案: