React-Bootstrap：如何更改所选 eventKey 的文本答案

【问题标题】：React-Bootstrap: How to change the text of a selected eventKeyReact-Bootstrap：如何更改所选 eventKey 的文本
【发布时间】：2017-04-27 17:22:14
【问题描述】：

所以我试图弄清楚如何更改所选下拉按钮上的一些文本，但目前我不知道如何访问它。任何帮助将不胜感激，谢谢。

return (
  <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}  onSelect={this.handleSelect}>
    <MenuItem eventKey="1">Some Text</MenuItem></DropdownButton>);
    ....


  handleSelect = (evt, evtKey) => {
if (evt == 1) { //EventKey 1 selected
  //Change the text

}

【问题讨论】：

如果您将选定的值存储在状态中，那么您可以使用三元运算符来更改文本，如下所示：<MenuItem eventKey="1">{this.state.value == 1 ? "Some Text": "Another Text"</MenuItem></DropdownButton>

标签： javascript reactjs react-bootstrap

【解决方案1】：

那为什么不使用state呢？

return (
  <DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}  onSelect={this.handleSelect}>
    <MenuItem eventKey="1">{this.state.myText}</MenuItem></DropdownButton>);
    ....

然后在你的处理程序中：

 handleSelect = (evt, evtKey) => {
if (evt == 1) { //EventKey 1 selected
  //Change the text
  this.setState({myText : "text changed!"});
}

【讨论】：