我想在用户单击某个元素时触发展开状态,但当用户使用 ref 单击外部时我未能实现关闭该元素。
这部分有问题:
handleClick = e => {
if (this.node.contains(e.target)) {
this.setState({
expand: !this.state.expand // doesn't work?
},()=>console.log(this.state.expand));
return;
}
this.handleClickOutside();
};
控制台触发了两次。
https://codesandbox.io/s/71l34po56x
如果您只需在handleClick中将expand
的状态更改为true
,您就可以看到几乎可以工作的结果,但是我怎样才能实现两件事。
- 用户可以切换内容。
- 用户点击内容或处理程序外部,内容将关闭。
最佳答案
问题是您将相同的事件处理程序 handleClick
附加到 div
两次(一次在 render
函数中,一次在 componentWillMount
)。
这就是为什么当您单击 div
时,您会设置状态两次,结果 expand
从 false 变为 true,然后从 true 变为 false。
关于javascript - 单击其他元素/主体失败时 react 切换并关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50099871/