gpt4 book ai didi

reactjs - react 引导:Dropdown.item,onSelect 返回一个空目标

转载 作者:行者123 更新时间:2023-12-04 17:30:37 25 4
gpt4 key购买 nike

我正在使用 我正在我的 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

我已经尝试在构造函数中绑定(bind)和不绑定(bind)函数,但两者都为 event.target 生成了空值

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

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

最佳答案

你有一些选择。

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

  • Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See ... for more information.



    因此,为了访问原始事件,您应该调用 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

    关于reactjs - react 引导:Dropdown.item,onSelect 返回一个空目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60078978/

    25 4 0
    文章推荐: python - Selenium 不会加载完整的 DOM 树,只会加载页面源代码
    文章推荐: pandas - 滚动分组累计总和
    文章推荐: javascript - 使用 javascript 动态更改