为啥我无法在外部点击时使用 react js 访问我的两个容器的当前目标值？

Posted 2023-03-16

【中文标题】为啥我无法在外部点击时使用 react js 访问我的两个容器的当前目标值？

【英文标题】：Why i can't access my two container's current target value using react js on making outside click?为什么我无法在外部点击时使用 react js 访问我的两个容器的当前目标值？

【发布时间】：2021-08-19 08:38:08

【问题描述】：

使用这个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>

或者我可以使用 react-foco 吗？

【问题讨论】：

我的猜测是您对两个 div 使用了相同的 ref，因此只有最后获得容器 ref 的 div 会受到影响，而另一个不会受到影响。我认为 mydropdown 应该是一个组件，这样可以更轻松地管理他的状态，而不是试图使逻辑成为父端。

是的，我该如何解决这个问题？就像我应该改变我的参考或其他东西？你能指导我吗@NicolasMenettrier

你的猜测是正确的，这将是什么替代方案，以访问 dropdwon @NicolasMenettrier 的外部点击

codepen.io/NicolasMenettrier/pen/LYWezjq?editors=1111 我可能会做类似的事情，虽然不完美，但它会告诉你这个想法

【参考方案1】：

您需要考虑以下几点来完成您的工作，

两个下拉容器的两个单独的引用。

维护两个不同的状态变量

需要在handleClickoutside 和handleButtonClick 方法中分别处理refs 和button click 的情况。参考下面的代码

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

【讨论】：

谢谢@ShwetaJoshi，但我的最后一个参考仍然正常工作，而不是第一个下拉列表的参考

我已经更新了和你一样的更新，问题是在我的手柄按钮点击我有一个选择下拉值的选项，正如我之前所说的，当时我的 ref 没有被应用我无法选择仅在第一个下拉列表中的任何内容，但我的倒数第二个下拉列表工作正常，正如我们预期的那样