Question

getData(){ 
  return ( 
  <div class="firstGen" onClick={this.handleRetrive}> some elements </div> 
  <div class="firstGen" onClick={this.handleRetrive}> some elements </div> 
  <div class="firstGen" onClick={this.handleRetrive}> some elements </div> 
  <div class="firstGen" onClick={this.handleRetrive}> some elements </div> 
 ); 
} 
handleRetrive(e) { 
  return( <div id="SecondGen"> some other elements </div> 
 ); 
} 
render()
{ 
  return( 
  <div> some elements <div id="main">{this.getData}> some text</div> </div> 
   ); 
 }

/ *我完美地显示了id = main元素，我只需点击.firstGen就可以用#SecondGen替换.firstGen。（只有所有元素列表中点击的元素有class = firstGen）注意：不能使用状态变量由于我的代码复杂化。 * /

Answer 1

您没有调用getData方法。试试this.getData()。

Answer 2

你不能从onClick返回参数（没有什么可以捕获该响应）。

您希望它在handleRetrive函数内更改为状态，状态可以是在渲染中显示的HTML。

无论如何，流程必须如下：

抓住onClick
修改状态。
状态更改将触发渲染功能，使用状态决定渲染内容。

您可以在此处阅读有关条件渲染的内容：

https://facebook.github.io/react/docs/conditional-rendering.html

Reactjs：替换div（动态填充具有相同的类）onclick with new div仅用于单击的元素

2 个答案: