时间戳

首页 > 解决方案 > React Semantic-UI：Dropdown.Menu / 问题

reactjs - React Semantic-UI：Dropdown.Menu / 问题

问题描述

我正在尝试构建一个语言选择器下拉菜单，显示语言的标志符号 - 在未打开的菜单中以及在打开的菜单中。我不想显示任何文本。

我在我的应用程序中使用内联样式来设置组件的样式，因此我也想通过 style={myStyle} 定义菜单样式，否则打开的下拉菜单不会受到组件样式的影响。

<Dropdown
  value={value}
  selection
  compact
  style={myStyle}
  onChange={getLanguage} // could be removed
  options={countryOptions}
>
 <Dropdown.Menu style={myStyle} >
   {countryOptions.map( country => {
     return (
       <Dropdown.Item key={country.key} value={country.value} flag={country.flag} onClick={getLanguage} />
          )
    })}
  </Dropdown.Menu>
</Dropdown>

我使用上面的代码，它对我有用，唯一的问题是，我收到错误消息，我不能同时使用 <Dropdown.Items> 和组件中的选项：

Warning: Failed prop type: Prop `selection` in `Dropdown` conflicts with props: `children`. They cannot be defined together, choose one or the other.

我不使用选项的问题是，我不知道如何在组件中设置活动项。如果没有这些选项，似乎无法在此组件内显示当前值。

我错过了什么或做错了什么？是否可以在不使用选项的情况下设置当前值？我可以忽略错误信息吗？

非常感谢您的帮助。

标签： reactjsdrop-down-menusemantic-ui

解决方案

我认为您要求的是在 Dropdown.Item 上设置 active 道具，并通过测试查看 Item 值是否与下拉菜单的设置值匹配。

<Dropdown
  value={value}
  compact
  style={myStyle}
  selection
  onChange={getLanguage} // could be removed
  options={countryOptions}
>
 <Dropdown.Menu style={myStyle} >
   {countryOptions.map( country => {
     return (
       <Dropdown.Item 
            key={country.key} 
            value={country.value} 
            active={(value === country.value)}
            flag={country.flag} 
            onClick={getLanguage} 
       />)
    })}
  </Dropdown.Menu>
</Dropdown>

推荐阅读