Неперехваченная ошибка: цель отсутствует. Поппер должен получить цель от Менеджера Поппера,

Я пытаюсь настроить кнопку реагирования, используя этот ответ. Но я получаю эту ошибку в консоли, и раскрывающийся список не работает.

Popper.js: 39 Неперехваченная ошибка: цель отсутствует. Поппер должен получить цель от Менеджера Поппера или в качестве реквизита. в 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. закрыть (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, но я не могу заставить его работать даже после этого, хотя простой пример работает отлично, если оставить его без изменений.


reactjs javascript react-redux reactstrap
person Black Mamba    schedule 11.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причиной ошибки были мои поспешные решения, которые смешали некоторые вещи: при переходе с выпадающих списков на пользовательские я пропустил следующие части:

toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

To 

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>

Вместо пользовательских тегов

person Black Mamba    schedule 11.05.2018