javascript - 未捕获的错误:目标丢失。必须从 Popper Manager 给 Popper 一个目标,
问题描述
我正在尝试使用此答案自定义 reactstrap 按钮。但是我在控制台中收到此错误并且下拉菜单不起作用
Popper.js:39 未捕获的错误:目标丢失。Popper 必须从 Popper Manager 中获得一个目标,或者作为一个道具。在 Popper._this._getTargetNode (Popper.js:39) 在 Popper._createPopper (Popper.js:150) 在 Popper._this._handlePopperRef (Popper.js:93) 在 attachRef (ReactRef.js:20) 在 Object.webpackJsonp ../node_modules/react-dom/lib/ReactRef.js.ReactRef.attachRefs (ReactRef.js:42) 在 ReactReconcileTransaction 的 CallbackQueue.notifyAll (CallbackQueue.js:76) 的 ReactDOMComponent.attachRefs (ReactReconciler.js:23)。关闭 (ReactReconcileTransaction.js:80) 在 ReactReconcileTransaction.closeAll (Transaction.js:206) 在 ReactReconcileTransaction.perform (Transaction.js:153)
这是我的组件:
import React from 'react'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'
import FontAwesome from 'react-fontawesome'
import './ComponentStyle.scss'
export default class DropdownIs extends React.Component {
constructor (props) {
super(props)
this.toggle = this.toggle.bind(this)
this.state = {
value: 3,
dropdownOpen: false,
dropdownOptions: []
}
}
toggle () {
console.log('called')
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}))
}
handleChange = (event, index, value) => this.setState({ value });
render () {
return (
<Dropdown className='dropdown-is' isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<span className='dropdown-shown' onClick={this.toggle}
data-toggle='dropdown'
aria-haspopup='true'
aria-expanded={this.state.dropdownOpen}
>
<FontAwesome
className='super-crazy-colors icon'
name='chevron-down'
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
</span>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
)
}
}
更新 我使用以下方法修复了上述错误:
<DropdownToggle
tag='span'
className='dropdown-shown'
onClick={this.toggle}
data-toggle='dropdown'
aria-expanded={this.state.dropdownOpen}
>
<FontAwesome
className='super-crazy-colors icon'
name='chevron-down'
style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
/>
</DropdownToggle>
而不是跨度,但即使在它之后我也无法让它工作,尽管如果不修改这个简单的例子可以完美地工作。
解决方案
错误的原因是我仓促的决定混合了某些事情:从下拉菜单切换到自定义时,我错过了这些部分:
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
至
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
并使用:
<DropdownToggle
tag="span"
onClick={this.toggle}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen}
>
Custom Dropdown Content
</DropdownToggle>
而不是自定义标签
推荐阅读
- javascript - 如何让特定功能摆脱 setInterval 循环>
- java - 多次恢复时活动不平滑滚动
- python - 使用python从特定键的字典列表中获取一个值
- wordpress - ([Bug 主题)标头已由(输出开始于 /homepages/30/d516325486/htdocs/wordpress/wp-content/themes/dimsemenov-Touchfolio
- r - 将 tidyeval 参数转换为字符串
- javascript - Dynamacially change variable in function using number paramater
- angular - Validation using Regex using angular 7
- javascript - Unexpected behavior when repeatedly calling map.setZoom with the same zoom level (Leaflet.js)
- bash - What does ENV=${deploy-qa} mean in bash? How does it evaluate to "qa"?
- c - 将 printf 放在哪里进行输出