未捕获的错误：目标丢失。 Popper 必须从 Popper Manager 中获得一个目标，

Posted 2023-03-23

【中文标题】未捕获的错误：目标丢失。 Popper 必须从 Popper Manager 中获得一个目标，

【英文标题】：Uncaught Error: Target missing. Popper must be given a target from the Popper Manager,

【发布时间】：2018-10-21 13:08:17

【问题描述】：

我正在尝试使用 this answer 自定义 reactstrap 按钮。但我在控制台中收到此错误并且下拉菜单不起作用

Popper.js:39 未捕获的错误：目标丢失。必须给波普尔一个 来自 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) 在 ReactDOMComponent.attachRefs (ReactReconciler.js:23) 在 CallbackQueue.notifyAll (CallbackQueue.js:76) 在 ReactReconcileTransaction.close (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>

而不是 span，但即使在它之后我也无法让它工作，尽管如果不修改这个简单的例子可以完美地工作。

【参考方案1】：

错误的原因是我草率的决定混合了某些事情： 在从下拉菜单切换到自定义时，我错过了这些部分：

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>

代替自定义标签