当使用<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”时，反应引导程序

回答

相关问题