React-bootstrap：Dropdown.item，onSelect 返回空目标

Question

我正在使用react-bootstrap，并且在我的react网页中实现了一个下拉菜单。handleClick在我的下拉菜单中，当选择按钮时我将调用一个函数。

\n\n\n\n

<Dropdown.Menu>\n    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>\n</Dropdown.Menu>\n

\n\n

这是我的handleClick功能：

\n\n\n\n

handleClick = (eventkey, event) => {\n  console.log(eventkey)\n  console.log(event)\n}\n

\n\n

然而，它event.target是空的，下面附上的是console.log我的客户端浏览器的：

\n\n

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: (...)\ntarget: null\n

\n\n

我尝试过绑定和不绑定构造函数中的函数，但两者都为 event.target 生成了空值

\n\n

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: (...)\ntarget: null\n

\n\n

我在这里做错了什么？任何形式的概念澄清将不胜感激！

\n

Answer 1

你有一些选择。

1. React 在尝试访问事件时抛出警告

警告：出于性能原因重用此合成事件。如果您看到此内容，则说明您正在访问nativeEvent已发布/无效的合成事件的属性。这被设置为空。如果必须保留原始合成事件，请使用 event.persist()。请参阅...了解更多信息。

因此，为了访问原始事件，您应该event.persist()在访问事件之前调用 。

像这样：

handleClick = (eventkey, event) => {
  event.persist();
  console.log(eventkey)
  console.log(event)
}

2. 您可以使用eventkey来传递值

change = eventkey => {
  // a.persist();
  alert(`you chosen: ${eventkey}`);
};

<Dropdown onSelect={this.change}>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item eventKey="baudratestate1200">1200</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate2400">2400</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate4800">4800</Dropdown.Item>
    <Dropdown.Item eventKey="baudratestate9600">9600</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-r7n0f

3. 使用硬编码参数调用函数

change = option => {
  alert(`you chosen: ${option}`);
};

<Dropdown.Item onSelect={()=> this.change("baudratestate1200")}> 1200
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate2400")}> 2400
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate4800")}> 4800
</Dropdown.Item>
<Dropdown.Item onSelect={()=> this.change("baudratestate9600")}> 9600
</Dropdown.Item>

https://codesandbox.io/s/react-bootstrap-dropdown-get-value-6gknv