Handhabung Dropdown-Element wählen Sie in React Bootstrap

Question

Ich bin durch ein Diktat iterieren und zeigt die Schlüssel in einem React-Bootstrap-Dropdown-Menü. Dies ist meine Reaktion Drop-Down-Komponente,

class Dropdown extends React.Component 
{ 
    constructor(props) 
    { 
     super(props); 
     this.onTargetSelect = this.onTargetSelect.bind(this); 
    } 

    onTargetSelect(target) 
    { 
     console.log("Outputting from here: ", target); 
     document.getElementById("dropdown-title").textContent(target); 
     this.props.passTargetToParent(target); 
    } 

    render() 
    { 
     return(
     <SplitButton title="Select Target" id="dropdown-target"> 
      {Object.keys(dict).map(key => <MenuItem key={dict[key]} href={`#${dict[key]}`} onSelect={this.onTargetSelect(dict[key])}>{key}</MenuItem>)} 
     </SplitButton>); 
    } 

} 

Es gibt zwei Dinge, die ich versuche, hier zu tun, die wegen meiner begrenzten Kenntnis von Javascript schwierig erweisen.

1. Dies zeigt alle Werte an, die mit den entsprechenden Tasten beim Laden verbunden sind. Das ist nicht das Verhalten, das ich will. Ich möchte nur das gewählte Item im Dropdown-Menü loggen.

2. Zweiter Ich möchte den aktuell angezeigten Titel als Select Target zu dem ausgewählten Element im Dropdown ändern.

Answer 1

Änderung dieser:

onSelect={() => this.onTargetSelect(dict[key])} 

... was Sie oben haben ausführt this.onTargetSelect() sofort während der Prozess machen und damit einmal für jedes Element in der Liste. Sie müssen einen Handler (Funktion) für onSelect bereitstellen, und dieser Handler sollte this.onTargetSelect() darin aufrufen. Die Syntax "() =>" erstellt eine neue Funktion.

Um den Titel zu ändern, sollten Sie das DOM nicht so verwenden, wie Sie es tun. In React ändern Sie den Zustand oder die Requisiten, um ein erneutes Rendern Ihrer Komponente zu bewirken. Vollständiger Code unter Verwendung .state/.setState() (nicht getestet, einfach kopieren/von Ihnen eingefügt und gezwickt):

class Dropdown extends React.Component { 

    constructor(props) { 
    super(props); 
    this.onTargetSelect = this.onTargetSelect.bind(this); 

    this.state = { title: 'Select Target' }; 
    } 

    onTargetSelect(target) { 
    this.setState({ title: target }); 

    this.props.passTargetToParent(target); 
    } 

    render() { 
    return (
     <SplitButton title={this.state.title} id="dropdown-target"> 
     {Object.keys(dict).map(key => <MenuItem key={dict[key]} href={`#${dict[key]}`} onSelect={() => this.onTargetSelect(dict[key]) }>{key}</MenuItem>) } 
     </SplitButton> 
    ); 
    } 

}