反应引导默认选择值下拉答案

【问题标题】：React bootstrap default selected value for dropdown反应引导默认选择值下拉
【发布时间】：2020-07-19 05:45:31
【问题描述】：

我正在使用 react-bootstrap 库，我希望有默认的 selected 值。

我浏览了他们的文档，但找不到与传递/设置默认值相关的任何内容。

这是我目前使用的方式

const dropDownQuestion = (props) => {
  const { options, upsideEmit, value } = props
  return (
    <DropdownButton
      id="dropdown-basic-button"
      onSelect={(eventKey) => upsideEmit(eventKey)}
    >
      {options.map((element) => (
        <Dropdown.Item key={element.id}>{element.value}</Dropdown.Item>
      ))}
    </DropdownButton>
  )
}

其中 value 恰好是可选的default Value。有人可以帮助我如何通过 react-bootstrap 下拉菜单实现这一目标吗？

【问题讨论】：

标签： reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

这取决于你所说的默认值是什么意思。如果您的意思是在用户触摸它之前出现在下拉按钮上，您可以简单地将其插入（硬编码或通过变量）作为Dropdown.Toggle 的文本，例如：

<Dropdown.Toggle id="dropdown-basic">
    Your "default value" here 
</Dropdown.Toggle>

如果默认值是指在用户触摸它之前的下拉所选项目的值，这取决于你，在你使用的数据结构中选择它设置值，例如：

var options = ["1", "2", "3", "4", "5"];
let chosenValue=options[0] // The "default Value"
function onSelect(eventKey, event) { // user can change the "default value"
chosenValue=eventKey;
.
.
.
}


<Dropdown onSelect={onSelect}>
    <Dropdown.Toggle id="dropdown-basic" />
    <Dropdown.Menu>
      {options.map(option => (
        <Dropdown.Item
          eventKey={option}
          key={option}>
          {option}
        </Dropdown.Item>
      ))}
   </Dropdown.Menu>
</Dropdown>

【讨论】：

【解决方案2】：

您可以使用Dropdown.Item 上的active 属性来突出显示它，如果您是这个意思？

DropdownButton 没有被设计为输入，所以你不能有一个“默认值”，菜单中的每个项目都呈现为一个按钮。

【讨论】：