Question

<DropdownButton bsStyle="default" title="No caret" noCaret id="dropdown-no-caret"> 
  <MenuItem eventKey="1">Action</MenuItem>
  <MenuItem eventKey="2">Another action</MenuItem>
  <MenuItem eventKey="3">Something else here</MenuItem>
  <MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>

我从react-bootstrap组件示例https://react-bootstrap.github.io/components.html#btn-dropdowns-nocaret

中获取了此示例

如果选择其中一个菜单项，您将如何更新按钮标题？

Answer 1

使用州设置标题并向您onChange添加DropdownButton事件以更新状态

<DropdownButton bsStyle="default" title={this.state.btnTitle} noCaret id="dropdown-no-caret" onChange={this.handleChange}> 
  <MenuItem eventKey="1">Action</MenuItem>
  <MenuItem eventKey="2">Another action</MenuItem>
  <MenuItem eventKey="3">Something else here</MenuItem>
  <MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>

功能：

handleChange = () => {
    var val = 'someValue';
    this.setState({btnTitle: val});  
}

当您选择任何MenuItem时，这将更改标题。我希望这个解决方案可以帮助你

如何更新按钮标题？

1 个答案: