Javascript 选择上的React Bootstrap下拉按钮

我将选项值传递到一系列下拉按钮中，每个按钮都位于数据数组的子组件中

当在其中一个按钮中选择一个选项时，我将使用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>

//父组件
sourceSelected=（事件）=>{
这是我的国家({
sourceSelected:事件
});
...
{MEDIUM.map（（MEDIUM）=>
)};
//子组件
{props.medium.source.map（（选项，索引）=>
{option}}

但是，我还希望在状态（mediumSelected=？？？）中存储从中选择选项的按钮的名称

---

还有什么方法可以让你选择把这个传回去还是我应该做些别的事情？

你可以利用Javascript事件和

这个

。基本上，将事件传递给将使用按钮名的函数，如下所示

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

---

我还举了一个简单的例子。不要介意文件名。

您可以利用Javascript事件和

这

。基本上，将事件传递给将使用按钮名的函数，如下所示

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

---

我还举了一个简单的例子。不要介意文件名。

好的，我用…向事件处理程序传递参数来回答这个问题

代码是：

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

//父组件
sourceSelected=（媒体名称、事件）=>{
这是我的国家({
sourceSelected:事件，
mediumSelected:medium\u名称
});
}
...
{MEDIUM.map（（MEDIUM）=>
)};

好的，我回答这个问题时使用了…将参数传递给事件处理程序

代码是：

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

//父组件
sourceSelected=（媒体名称、事件）=>{
这是我的国家({
sourceSelected:事件，
mediumSelected:medium\u名称
});
}
...
{MEDIUM.map（（MEDIUM）=>
)};

谢谢。但这实际上不是我需要的按钮点击，因为我正在使用下拉菜单中的选择功能。我只需要它将按钮名称作为子菜单中“从下拉菜单中选择”按钮的一部分传递回来。谢谢。但这不是我需要的按钮点击，因为我正在使用下拉菜单中的选择功能。我只是I don’我不需要它将按钮名称作为从子菜单中的下拉按钮中选择的一部分进行备份。您是否使用redux进行存储？不，我没有。我想在我进入该路径之前使其工作。您想存储按钮名称或按钮返回的值吗？谢谢@Aaqib我已经获得了从下拉按钮返回的值，但也要将按钮的名称存储在状态中。谢谢您是否使用redux进行存储？不，我没有。我想在我进入该路径之前使其工作。您要存储按钮的名称或按钮返回的值吗？谢谢@Aaqib我已经获得了从下拉列表返回的值，但也要存储在状态中按钮的名称。谢谢