如何更新按钮标题？

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.我希望这个解决方案能帮到你