在另一个动态渲染的组件内渲染react组件

Question

我正在制作一个React应用，并且我在主屏幕上有一个配置文件图标，单击它时会弹出一个下拉菜单，并且其中一个选项是登录或注册，当单击它时我有一个注册页面呈现如下：

<div classname='body'>
{
this.state.loginToggled
?(
<div className='login-is-toggled'>
<i class="fas fa-times" onClick={this.closeLogin}></i>
<div className='user-profile-login'>
<i class="fas fa-user-alt"></i>
</div>
<form>
<input placeholder='Email' />
<input placeholder='Password' />
<button>Submit</button>
</form>
<hr />
<a onClick={this.toggleSignup}>
Signup
</a>
</div>
):(
null
)
}
</body>

我的问题是，无论何时我单击渲染页面上的任何位置，即使在输入字段上，它也会关闭。我该如何解决？还是有更好的方法解决这个问题？