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

Question

点击后，我试图隐藏一个元素'GorillaSurfIn'。但它也应该将"setShouldGorillaSurfOut"设置为"true"。第二部分工作，但在我添加了这个功能之后：

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

单击后，代码会崩溃。

一旦我点击，该元素应该被隐藏/删除，直到下次应用程序重新启动。

下面是代码沙盒链接以获得进一步的解释。

我对任何解决方案都持开放态度，但也请解释，因为我对React的学习还很新鲜。

Answer 1

我对您的代码做了一些更改以使其正常工作。您可以根据需要进行进一步的更改。我想补充的几件事：-

1. 您应该避免使用findDOMNode(在大多数情况下，refs可以解决您的问题(，因为findDOMNode存在某些缺点，例如react的文档状态"；findDOMNode不能与功能组件一起使用"；。我用了裁判(在这种情况下是前锋裁判(来让它发挥作用。

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

3. 查看代码沙盒。