为什么我无法在进行外部点击时使用 react 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 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吗？

Answer 1

您需要考虑以下几点才能完成工作

1. 两个独立的引用用于两个下拉容器。

2. 维护两个不同的状态变量

3. 需要分别在refs和button-click的handleClickoutside和handleButton-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