如何更新按钮标题？

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});  
}

这将在您 select 任何 MenuItem 时更改标题。希望这个解决方案能帮到你

如何更新按钮标题？

How to update the button title?

reactjs

react-bootstrap