當使用<ButtonGroup>作爲「undefined」時，反應引導程序

我使用純HTML來使用html的select標記。現在，我試圖用react-bootstrap替換HTML部分。除了react-bootstrap標籤之外，我有類似的東西，但是每當我使用<ButtonGroup>的react-bootstrap而不是select純HTML標籤時，我都會收到不確定的結果。
這是工作：當使用<ButtonGroup>作爲「undefined」時，反應引導程序

<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'}) 
    } 
    }

來源

2017-09-18 noobie

看react-bootstrap的文檔，onSelect事件DropdownButton不會返回事件（就像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> 
) 
}

來源

2017-09-18 12:22:41 mersocarlin

做'onDropdownSelect =（eventKey）=> {this.setState（{invoiceType：eventKey}） }'工作！請更新你的答案 – noobie

@noobie我雖然你需要'groupBySelector'事件。另外，由於性能問題，我不建議在這種情況下使用箭頭功能。每次組件呈現時，onSelect事件處理程序都會獲得一個新的實例:) – mersocarlin

你在關注[this]（https://react-bootstrap.github.io/components.html）鏈接嗎？ – noobie

嘗試使用箭頭功能添加事件：

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

來源

2017-09-18 11:57:55

同樣的錯誤仍然存在 – noobie

嘗試添加eventKey到菜單項 –

當使用<ButtonGroup>作爲「undefined」時，反應引導程序

回答

相關問題