реагировать на переключение и закрытие при нажатии на другой элемент / тело не удалось

Question

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

Что-то не так с этой частью

handleClick = e => {
    if (this.node.contains(e.target)) {
      this.setState({
        expand: !this.state.expand // doesn't work?
      },()=>console.log(this.state.expand));

      return;
    }

    this.handleClickOutside();
  };

Консоль сработала дважды.

https://codesandbox.io/s/71l34po56x

Если вы просто измените состояние expand на true в дескрипторе, щелкните почти рабочий результат, но как мне добиться двух вещей.

1. Пользователь может переключать содержимое.
2. Пользователь щелкнул мышью снаружи содержимого или обработчика, закрывающего содержимое.

Answer 1

Вы можете испускать функции componentWillMount () и componentWillUnmount в целом. Затем, когда клик сделан на div, функциональность переключения работает отлично. Единственное, чего вам здесь не хватает, так это то, что когда клики, сделанные за пределами div, clickhandler () больше не привязывается к этому div, вместо этого щелкается корневой div.

Чтобы преодолеть это, я добавил родительский div, чтобы занять максимальную высоту, затем использовал обработчики щелчков, чтобы развернуть и переключить значения div.

Ниже приведен фрагмент кода.

import React, { Component } from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
  border: "2px solid red",
  height: "500px"
};

const styles2 = {
  fontFamily: "sans-serif",
  textAlign: "center",
  border: "2px solid black"
};

export default class App extends Component {
  state = {
    expand: false
  };

  expandedArea() {
    return <div>content area</div>;
  }

  handleClickOutside = () => {
    this.setState({
      expand: false
    });
  };

  handleClick = e => {
    console.log("ddd");
    e.stopPropagation();
    if (this.node.contains(e.target)) {
      this.setState({
        expand: !this.state.expand // doesn't work?
      });

      return;
    }

    this.handleClickOutside();
  };

  render() {
    const { expand } = this.state;

    return (
      <div style={styles} onClick={e => this.handleClickOutside(e)}>
        <div
          style={styles2}
          ref={node => (this.node = node)}
          onClick={e => this.handleClick(e)}
        >
          hello world
          {expand && this.expandedArea()}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Надеюсь, это поможет вам в том, что вы смотрели, спасибо!

Answer 2

Проблема в том, что вы подключаете один и тот же обработчик событий handleClick дважды к вашей div (один раз в функции render, а также в componentWillMount).

Вот почему, когда вы нажимаете div, вы устанавливаете состояние дважды, и в результате expand переходит от ложного к истинному, затем от истинного к ложному.