如何更新按钮标题？

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

How would you update the button title when one of the menu item is selected?

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 时，这将更改标题。我希望这个解决方案可以帮助你