如何在React中隐藏或删除元素onClick？

问题描述

单击后，我试图隐藏元素“ GorillaSurfIn”。 但是它也应该将“ setShouldGorillaSurfOut”触发为“ true”。第二部分有效，但是在我添加了此功能之后：

function hideGorillaSurfIn() {
    let element = document.getElementById('gorilla-surf-in');
    ReactDOM.findDOMNode(element).style.display = 
  this.state.isClicked ? 'grid' : 'none';
}

单击后，代码会崩溃。

单击后，该元素应被隐藏/删除，直到下次应用重新启动为止。

这里是Code Sandbox Link，以供进一步说明。

我乐于接受任何解决方案，但也请您解释一下，因为我仍在学习React。

解决方法

我对您的代码进行了一些更改以使其正常运行。您可以根据需要进行进一步的更改。我想添加一些内容：-

1. 您应该避免使用findDOMNode（在大多数情况下，参考文献可以解决您的问题），因为findDOMNode存在某些缺点，例如react's documentation states“ findDOMNode不能与功能组件一起使用”。 我已经使用了ref（在这种情况下为转发ref）来使其工作。

2. GorillaSurfIn被调用了两次，因此屏幕上有两个具有相同ID的Gorilla gif。不确定这是否是预期的行为，但每个元素都应具有唯一的ID。

3. 签出code sandbox。