如何在 ReactJS 中使用特定值制作下拉菜单？

Posted 2023-02-22

【中文标题】如何在 ReactJS 中使用特定值制作下拉菜单？

【英文标题】：How to make a Dropdown with specific values in ReactJS?

【发布时间】：2018-12-11 13:01:09

【问题描述】：

我正在使用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;

【问题讨论】：

将optionLabel="name" 添加到您的<Dropdown>。

正是我需要它！非常感谢！！

【参考方案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' />
                <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"/>

【讨论】：

第二个演示使用name: 'New York', code: 'NY' 格式，如果name 按要求声明为optionLabel，则效果非常好。

哦，对了，很好。看起来该库需要一些模板才能呈现自定义内容。

非常感谢您的帮助。我知道这个演示primefaces.org/primereact/#/dropdown，但我无法让它工作。我只需要在

中添加 optionLabel="name"

@christopher_pk 如何添加键属性以避免错误 - 遇到两个具有相同键的孩子。密钥应该是唯一的，以便组件在更新过程中保持其身份。 ***.com/questions/64771089/…