React BootstrapドロップダウンボタンOnSelect

Question

私はオプション値を一連のドロップダウンボタンに渡しています。各ボタンはデータ配列の子コンポーネントにあります。

いずれかのボタンでオプションを選択すると、親コンポーネントの状態をonSelectの結果で更新しています。これは、すべて正常に動作している...

//parent component 

    sourceSelected = (event) => { 
    this.setState({ 
     sourceSelected: event 
    }); 

    ... 

    <ButtonToolbar> 
     {MEDIUM.map((medium) => 
     <Medium key={medium.medium_name} medium={medium} onSelectedValue{this.sourceSelected } /> 
    )}; 
    </ButtonToolbar> 

    //child component 
    <DropdownButton title={props.medium.medium_name} id="source-dropdown" onSelect={props.onSelectedValue}> 
    {props.medium.source.map((option, index) => 
    <MenuItem key={index} eventKey={option}> {option} </MenuItem>)} 
    </DropdownButton> 

しかし、私はまた状態で保存したい（mediumSelected = ???）オプションが選択されたボタンの名前です。

これを渡すためにOnSelectを取得する方法はありますか、他に何かする必要がありますか？

Answer 1

OK、私はこれを... https://reactjs.org/docs/handling-events.htmlを引数としてイベントハンドラに渡して回答しました。

コードは次のとおりです。

//parent component 
    sourceSelected = (medium_name, event) => { 
    this.setState({ 
     sourceSelected: event, 
     mediumSelected: medium_name 
     }); 
    } 
    ... 

    <div className='test'> 
     <ButtonToolbar> 
      {MEDIUM.map((medium) => 
      <Medium key={medium.medium_name} medium={medium} onSelectedValue={this.sourceSelected.bind(this, medium.medium_name) } /> 
     )}; 
     </ButtonToolbar> 

Answer 2

Javascriptイベントとthisを利用できます。基本的には、はまた、あなたのconstructor()

サンプルコードでthisをバインドする必要があります。この

<button name="btn" onClick={e => this.buttonName(e.target.name)}> 

のように、ボタン名を使用する機能にイベントを渡す：

constructor(props) { 
    super(props); 
    // Bind this so you can use it below 
    this.buttonName = this.buttonName.bind(this); 
    } 

    buttonName(e) { 
    console.log(e); 
    } 
    render() { 
    return (
     <div> 
     // Pass the name of the button to the function 
     <button name="btn" onClick={e => this.buttonName(e.target.name)}> 
      Button 
     </button> 
     </div> 
    ); 
    } 

私はhttps://codesandbox.io/s/lrwqr303vzの簡単な例も投げました。ファイル名は気にしないでください。