Wie aktualisiere ich den Titel der Schaltfläche?

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> 

nahm ich dieses Beispiel aus den reagieren-Bootstrap-Komponenten Beispiele, https://react-bootstrap.github.io/components.html#btn-dropdowns-nocaret

Wie würden Sie die Schaltfläche Titel aktualisieren, wenn eine der Menüpunkt ausgewählt wird?

Answer 1

Set der Titel einen Zustand an und füge eine onChange Ereignis Sie DropdownButton den Staat

<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> 

Funktion zur Aktualisierung verwendet:

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

Dies wird den Titel ändern, wenn Sie eine MenuItem wählen. Ich hoffe, diese Lösung hilft Ihnen