反応ブートストラップの<ButtonGroup>を使用している間、イベントは「未定義」として渡されます

Question

selectタグをhtmlに使用するためにプレーンHTMLを使用していました。今、私はreact-bootstrapでHTML部分を置き換えようとしています。私はreact-bootstrapタグ以外のすべてのものが似ていますが、<ButtonGroup>がreact-bootstrapで、代わりに平方HTMLのselectタグが使用されているときはいつも未定義です。
これが機能している：

<select onChange={this.groupBySelector}> 
    <option value="invoice">GROUP BY INVOICE</option> 
    <option value="customer">GROUP BY CUSTOMER</option> 
    <option value="month">GROUP BY MONTH</option> 
    </select>   

これは動作していない次のよう

<ButtonGroup> 
    <DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={this.groupBySelector}> 
     <MenuItem value="invoice">GROUP BY INVOICE</MenuItem> 
     <MenuItem value="customer">GROUP BY CUSTOMER</MenuItem> 
     <MenuItem value="month">GROUP BY MONTH</MenuItem> 
    </DropdownButton> 
    </ButtonGroup>   

groupBySelector機能は次のとおりです。

groupBySelector(event){ 
    console.log(event); 
    if ((event.target.value)==="invoice"){ 
     this.setState({invoiceType:'invoice'}) 
    } else if ((event.target.value)==="customer") { 
     this.setState({invoiceType:'customer'}) 
    } else if ((event.target.value)==="month") { 
     this.setState({invoiceType:'month'}) 
    } else { 
     this.setState({invoiceType:'invoice'}) 
    } 
    } 

Answer 1

react-bootstrapの文書を見ると、のonSelectイベントはイベントを返しません（selectのように）。

代わりに、eventKeyを各MenuItemのコンポーネントに属性する必要があります。

groupBySelector(eventOrKey){ 
    this.setState({ 
     invoiceType: eventOrKey.target ? eventOrKey.target.value : eventOrKey 
    }) 
    } 

    render() { 
    return (
     <DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={this.groupBySelector}> 
     <MenuItem eventKey="invoice">GROUP BY INVOICE</MenuItem> 
     <MenuItem eventKey="customer">GROUP BY CUSTOMER</MenuItem> 
     <MenuItem eventKey="month">GROUP BY MONTH</MenuItem> 
     </DropdownButton> 
    ) 
    } 

あなたは矢印機能を通じてイベントをバインドしたい場合は（が推奨されません）：

render() { 
    return (
    <DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={eventKey => this.setState({ invoiceType: eventKey })}> 
     <MenuItem eventKey="invoice">GROUP BY INVOICE</MenuItem> 
     <MenuItem eventKey="customer">GROUP BY CUSTOMER</MenuItem> 
     <MenuItem eventKey="month">GROUP BY MONTH</MenuItem> 
    </DropdownButton> 
) 
} 

Answer 2

は、イベントを追加するには、矢印機能を使用してみてください：

<DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={(eventKey, event) => this.groupBySelector(event)}>...