React Bootstrapのドロップダウンアイテムの選択

Question

私はdictを繰り返し、反応ブートストラップのドロップダウンメニューにキーを表示しています。 これは私のリアクトドロップダウンコンポーネント、

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

} 

ためのJavascriptの私の限られた知識のために困難証明している私がここでやろうとしている二つのことがあります。

1. これは、ロード中のそれぞれのキーに関連付けられたすべての値を表示します。それは私が望む行動ではありません。私は選択した項目をドロップダウンに記録するだけです。

2. 第2番目現在表示されているタイトルをSelect Targetとして、ドロップダウンリストの選択したアイテムに変更したいとします。

Answer 1

これに変更します。

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

...何あなたは上記の持っていることは、レンダリング処理中にすぐに）（this.onTargetSelectを実行するので、一度あなたのリストの各項目についてれます。 onSelectのハンドラ（関数）を提供する必要があり、そのハンドラはその内部でthis.onTargetSelect（）を呼び出す必要があります。 "（）=>"構文は新しい関数を作成しています。

タイトルを変更するには、あなたの行っているようにDOMを使用しないでください。 Reactでは、状態や小道具を変更してコンポーネントの再レンダリングを行います。 .state/.setState（）を使用して、以下の完全なコード（テストしていない、ただのコピー/あなたから貼り付けると微調整）：

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

}