我正在使用 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);
我在这里做错了什么?任何形式的概念澄清将不胜感激!
你有一些选择。
- React 在尝试访问事件时会抛出警告
警告:出于性能原因,将重用此综合事件。如果看到此内容,则表示您正在访问已发布/无效合成事件
nativeEvent
的属性。这设置为 null。如果必须保留原始合成事件,请使用 event.persist((。看。。。了解更多信息。
因此,为了访问原始事件,您应该在访问事件之前致电event.persist()
。
喜欢这个:
handleClick = (eventkey, event) => {
event.persist();
console.log(eventkey)
console.log(event)
}
- 您可以使用
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
- 使用硬编码参数调用函数
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