React引導下拉按鈕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

好的，我回答這個使用... 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。基本上，傳遞事件到將要使用的按鈕名稱的功能，這樣

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

您還需要在您的constructor()

示例代碼綁定this：

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上舉了一個快速示例。不介意文件名稱。