Question

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

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

您可以利用Javascript事件和<h:outputScript>。基本上，将事件传递给将使用按钮名称的函数，就像这样

this

您还需要在<button name="btn" onClick={e => this.buttonName(e.target.name)}>

中绑定this

示例代码：

constructor()

我还在https://codesandbox.io/s/lrwqr303vz上举了一个简短的例子。不要介意文件名。

Answer 2

好的，我使用... 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>

React Bootstrap下拉按钮OnSelect

2 个答案: