Ref не работает (реагировать JS) - PullRequest
Новая
       9

Ref не работает (реагировать JS)

0 голосов
/ 01 июля 2018

Эй, я прочитал документацию (https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) и попытался сделать то же самое, но это не работает, несмотря на те же строки добавить: 

import React from 'react'
import './Nav.css'
import {NavLink} from 'react-router-dom'
import Cookies from 'js-cookie'
import Logo from './Logo'

class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.textInput = React.createRef(); //// I INIT MY REF ////
    this.state = {
      showCategory: false
    }

    this.displayMenu = this.displayMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
    this.logOutKillCookie = this.logOutKillCookie.bind(this);
  }

  displayMenu() {
    this.setState({ showCategory: true }, () => {
      document.addEventListener('click', this.closeMenu)
    })
  }

  closeMenu(event) {
    console.log(event.target, this.dropdownMenu)
    if (!this.textInput.contains(event.target)) { //// ERROR BECAUSE this.textInput IS NULL ////
      this.setState({ showCategory: false }, () => {
        document.removeEventListener('click', this.closeMenu)
      })
    }
  }

  componentDidMount() {
    console.log(this.textInput) //// RENDER ME NULL... ////
  }

  logOutKillCookie() {
    Cookies.remove('id')
    Cookies.remove('username')
  }
  render() {
    return (
      <div id='Nav_wrapper'>
        <Logo className='Nav_logo'/>
        <div id='Nav_trigram' onClick={this.displayMenu}>{'\u2630'}</div>
      {(this.state.showCategory) ? (
        <div id='Nav_menu' ref={this.textInput}> //// I SET THE REF VALUE ////
          <NavLink id='Nav_match' className='Nav_category' exact to='/' activeClassName={'Nav_clicked'}>Match</NavLink>
          <NavLink id='Nav_chat' className='Nav_category' exact to='/chat' activeClassName={'Nav_clicked'}>Chats</NavLink>
          <NavLink id='Nav_profil' className='Nav_category' exact to='/profil' activeClassName={'Nav_clicked'}>Profil</NavLink>
          <a href='/' id='Nav_logOut' className='Nav_category' onClick={this.logOutKillCookie}>LogOut</a>
        </div>
      ) : null}
      </div>
    );
  }
}
export default Nav;

Надеюсь, что кто-то может помочь и объяснить мне, где моя ошибка. Спасибо!

1 Ответ

0 голосов
/ 01 июля 2018

ссылка отсутствует, причина условия рендеринга: 

{(this.state.showCategory) ?

и начальное состояние showCategory = false, поэтому нет div с ref для состояния монтирования компонента и ref равен null.

...