时间戳

首页 > 解决方案 > 单击按钮后如何防止在按钮旁边呈现新组件

reactjs - 单击按钮后如何防止在按钮旁边呈现新组件

问题描述

当我单击它时，我有一个按钮，它将在当前组件中呈现其他组件的数据（即从 API 获取数据）。但它在按钮旁边呈现：

<Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 35 , marginBottom: 10}} onClick={this._onButtonClick}>
  Search
</Button>
{this.state.showComponent ?
  <NewComponent A = {this.state.a} B = {this.state.b} C = {this.state.c} D = {this.state.d}/> : null
}

实际上，此按钮以水平方式位于 div 的右侧（左侧有一些搜索过滤器，一些下拉菜单和日期选择器），但我想在此搜索过滤器下方呈现组件数据。谁能告诉我如何实现这一目标？

标签： reactjsbutton

解决方案

注意：我假设您将 Button 和 NewComponent 呈现在与代码片段相同的位置。请分享完整的组件，以便更好地了解您的问题。

您必须移动NewComponent具有所有搜索过滤器和按钮的 div 外部。

...
<div>
  // ...search filters
  <Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 
    35 , marginBottom: 10}}
   onClick={this._onButtonClick}
 >
   Search
 </Button>
</div>

{this.state.showComponent ?
   <NewComponent A = {this.state.a} B = {this.state.b}
   C = {this.state.c} D = {this.state.d}/> : null
}

推荐阅读