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

Posted 2023-01-05

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

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

这是我的handleClick函数：

handleClick = (eventkey, event) => 
  console.log(eventkey)
  console.log(event)

但是，event.target为空，下面是我的客户端浏览器中的console.log：

Class dispatchConfig: …, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: ƒ, …
nativeEvent: (...)
type: (...)
target: null

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

this.handleClick = this.handleClick.bind(this);

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

答案

您有一些选择。

1. 尝试访问事件时反应会发出警告

警告：出于性能原因，此合成事件被重用。如果看到此消息，说明您正在访问已发布/无效的综合事件的属性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