Почему я не могу получить доступ к текущему целевому значению моих двух контейнеров с помощью реакции js на внешний щелчок?

Question

Используя этот https://codedaily.io/tutorials/Create-a-Dropdown-in-React-that-Closes-When-the-Body-is-Clicked, я нашел свое решение, чтобы мое раскрывающееся меню приближалось при нажатии снаружи где-нибудь еще.

Но проблема в том, что у меня есть два похожих компонента раскрывающегося списка, чтобы применить это, поэтому, когда я применил, мой последний раскрывающийся список работал правильно, но не первый. Я не могу понять, почему? может ли кто-нибудь помочь мне в этом.

          this.container = React.createRef();
    this.state = {
      open: false,
    };
    componentDidMount() {
      document.addEventListener("mousedown", this.handleClickOutside);
    }
    componentWillUnmount() {
      document.removeEventListener("mousedown", this.handleClickOutside);
    }
    handleClickOutside = (event) => {
     if (
       this.container.current &&
       !this.container.current.contains(event.target)
      ) {
    this.setState({
      open: false,
    });
   }
   };

и в моем теле div,

         <div className="container" ref={this.container}>
     {this.state.open && <div>mydropdown1</div>}
   </div>
   <div className="container" ref={this.container}>
     {this.state.open && <div>mydropdown2</div>}
   </div>

Answer 1

Вам необходимо учитывать следующие моменты, чтобы выполнить свою работу,

1. Две отдельные ссылки для двух раскрывающихся контейнеров.

2. Поддерживать две разные переменные состояния

3. Необходимо обрабатывать случаи в методах handleClickoutside и handleButtonClick для ссылок и нажатия кнопки соответственно. см. ниже код

           container1 = React.createRef();
   container2 = React.createRef();
   state = {
       open1: false,
       open2: false,
           };
   
   componentDidMount() {
      document.addEventListener('mousedown', this.handleClickOutside);
   }
   componentWillUnmount() {
      document.removeEventListener('mousedown', this.handleClickOutside);
   }
   
   handleClickOutside = (event) => {
          if (
             this.container1.current &&
             !this.container1.current.contains(event.target)
             ) {
                 this.setState({open1: false});
             }
         if (
            this.container2.current &&
            !this.container2.current.contains(event.target)
            ) {
                this.setState({open2: false});
             }
          };
     }
   
   handleButtonClick = (containerNumber) => {
            this.setState({[containerNumber]: !this.state[containerNumber]});
        };
    // your code