Прикрепление события к документу, которое зависит от условно отображаемого элемента в React

Question

У меня есть элемент ввода, который отображается в зависимости от условия.

render() {
const {
  isNameInputVisible,
  name
} = this.state;

return (

    <div>
      {isNameInputVisible ? (
        <input
          onChange={this.handleNameChange}
          ref={this.nameInput}
          type="text"
          value={name}
        />
      ) : (
        <h1
          className="list-header__heading"
          onClick={this.handleNameInputVisibility}
        >
          {name}
        </h1>
      )}
    </div>
)

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

Прямо сейчас я делаю это:

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


  handleClick = event => {
      //do some logic
  };

Но мне было интересно, если это правильный путь, потому что событие существует и срабатывает, даже если элемент не отображается.

Итак, я попробовал это:

componentDidUpdate () {
   const {isNameInputVisible} = this.state;
    isNameInputVisible &&  document.addEventListener('mousedown', this.handleClick);
}

Но это не работает.

Вопрос 1: Как правильно прикреплять события к документу, когда это зависит от других условно отображаемых элементов ??

Вопрос 2: Как правильно прикрепить события, например, как escape-нажатие, для закрытия диалоговых окон и т. Д. ??

Answer 1

Вам необходимо добавить прослушиватель событий в методе componentDidMount только в том случае, если существует условно отображаемый элемент ref.Вы можете узнать, была ли ссылка прикреплена к элементу, используя this.refName.current.

. Самое важное здесь то, что элемент input получает свои собственные методы жизненного цикла вместо того, чтобы делиться ими с более крупным компонентом.Перемещая элемент input в его собственный компонент с его собственными методами жизненного цикла, эти методы будут запускаться только при создании и удалении input.

// App.jsx
import React from "react"
import ReactDOM from "react-dom"

import CustomInput from "./CustomInput"

class App extends React.Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
    this.toggleInput = this.toggleInput.bind(this)
    this.state = {
      inputVisible: false
    }
  }

  toggleInput(e) {
    this.setState(prevState => ({
      inputVisible: !prevState.inputVisible
    }))
  }

  render() {
    const { inputVisible } = this.state

    return (
      <div>
        <input type="button" value="toggle input" onClick={this.toggleInput} />
        { inputVisible
          ? <CustomInput />
          : <p>Input is not visible</p>
        }
      </div>
    )
  }
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

// CustomInput.jsx
import React from "react"

export default class CustomInput extends React.Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
  }

  componentDidMount() {
    this.inputRef.current &&
      document.addEventListener("mousedown", this.handleClick)
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick)
  }

  handleClick(e) {
    console.log("clicked")
  }

  render() {
    return (
      <input type="text" ref={this.inputRef} />
    )
  }
}

Попробуйте егоздесь