Не получается ссылка внутри функции в React - PullRequest
Новая
       17

Не получается ссылка внутри функции в React

0 голосов
/ 31 марта 2019

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

код - 

// @flow
import { PureComponent, createRef } from 'react';
import type { Props, State } from 'types';

class MyComponent extends PureComponent<Props, State> {
  static defaultProps = {
    myComponentBody: ''
  };

  state: State = {
    showMyComponent: false,
  };

  wrapperRef: { current: null | HTMLDivElement } = createRef();

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside(e: SyntheticEvent<>) {
    console.log(`Inside --->`); // This function is triggering
    console.log(this); // I am getting #document whole html
    console.log(this.wrapperRef); // undefined
    console.log(wrapperRef); // Uncaught ReferenceError: wrapperRef is not defined
    if (this.wrapperRef && !this.wrapperRef.contains(e.target)) {
      this.setState({
        showMyComponent: false,
      });
    }
  }

  handleClick(e: SyntheticEvent<>) {
    this.setState({
      showMyComponent: true,
    });
  }

  render() {
    const { myComponentBody } = this.props;
    return (
      <div onClick={e => this.handleClick(e)} ref={this.wrapperRef}>
        {this.props.children}
        {this.state.showMyComponent && (
          <div>
            <div>{myComponentBody}</div>
          </div>
        )}
      </div>
    );
  }
}

1 Ответ

1 голос
/ 31 марта 2019

Поскольку вы хотите получить доступ к , это , которое является контекстом вашего текущего класса.

Есть несколько подходов к этому.

1. привязать свой handleClickOutside в конструкторе 

constructor(props){
    super(props);
    this.handleClickOutside = this.handleClickOutside.bind(this);
}

2. преобразование handleClickOutside, чтобы быть функцией стрелки. 

  handleClickOutside = (e: SyntheticEvent<>) => {
    console.log(`Inside --->`); // This function is triggering
    console.log(this); // I am getting #document whole html
    console.log(this.wrapperRef); // undefined
    console.log(wrapperRef); // Uncaught ReferenceError: wrapperRef is not defined
    if (this.wrapperRef && !this.wrapperRef.contains(e.target)) {
      this.setState({
        showMyComponent: false,
      });
    }
  }

3. Или вы можете привязать его к событию клика 

    return (
      <div onClick={this.handleClick.bind(this)} ref={this.wrapperRef}>
        {this.props.children}
        {this.state.showMyComponent && (
          <div>
            <div>{myComponentBody}</div>
          </div>
        )}
      </div>
    );
...