使用 <ButtonGroup> 的 react-bootstrap 时，事件作为“未定义”传递

Question

我使用 HTML 来使用 html 的 select 标签。现在，我正在尝试用 react-bootstrap 替换 HTML 部分。除了 react-bootstrap 标签外，我都有类似的东西，但是，每当我使用 react-bootstrap 的 <ButtonGroup> 而不是普通 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

尝试使用箭头函数添加事件：

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

Answer 2

查看 react-bootstrap 的文档，DropdownButton 的 onSelect 事件并不是 return 事件（就像 select 一样）。

相反，您需要为每个 MenuItem 组件分配一个 eventKey。

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

使用 <ButtonGroup> 的 react-bootstrap 时，事件作为“未定义”传递

Event is passed as `undefined` while using <ButtonGroup> of react-bootstrap

reactjs

react-bootstrap