Question

当我单击复制图标时，我将显示一个弹出窗口。单击复制图标时，将状态“ showPopup”设置为true。我的渲染函数现在看到它是正确的，并显示弹出窗口。如果我在其他任何地方单击鼠标，弹出窗口会自动关闭。

到目前为止一切顺利。

问题是我在同一屏幕上有一个带有选择列表的下拉菜单。当我单击下拉菜单中的任何选择时，它还会更改状态下的另一个变量，从而导致重新渲染。

但是，“ showPopup”的先前状态为true而不是false。因此，无论我现在在同一屏幕上单击什么位置，都始终显示弹出窗口。我只希望在我特别单击“复制”按钮时显示它。

任何知道如何解决此问题的方法，我都这样尝试了componentDidUpdate：

  componentDidUpdate = (prevProps, prevState) => {
    if (prevState.showPopup === true) {
      this.setState({showPopup: false});
    }};

但是，当我第二次尝试再次单击复制图标时，这会导致问题。这次，弹出窗口仅在我单击复制图标时每2次出现一次。

有什么主意可以确保showPopup的初始状态始终重置为false吗？

Answer 1

我无法看到您的任何代码的答案是，更改下拉列表时将showPopup设置为false

<select onChange={() => this.setState({showPopup: false})}>
<option></option>
</select>

Answer 2

像上面一样，这是我的答案，但看不到您的代码。您需要在弹出窗口中的onCLose操作中将showPopup设置为false。这是我在说的一个懒惰示例。

<Popover onClose={() => setShowPopup(false)} />

只要关闭弹出窗口（包括单击鼠标右键），就会触发此事件，因此您的状态将设置为false。

编辑：我正在使用React状态挂钩，而我刚意识到您正在使用一个类组件，因此它实际上看起来像：

<Popover onClose={() => this.setState({showPopup: false})} />

但是，对于使用功能组件和状态挂钩的任何人，请使用上一个答案。

Answer 3

您尚未共享您的代码，因此我提供的解决方案没有看到您的代码。

您应该使用称为复制组件的onClick操作的方法分别更新“ showPopup”状态，而不是在componentDidUpdate中进行更新。