Reactjs：使用input元素时的不变违例

Question

我对React有点新意，正在尝试一个简单的实验。

我希望在我的初始渲染中有text-box和search-button，然后当我点击search-button时，我想要一个完全不同的标记（close-button + div/h1）

所以我将值存储在状态变量中，在render方法中，我检查该状态并决定标记。

这里是同一http://jsfiddle.net/rso3uk9f/

的JSFiddle

在执行此操作时，我遇到了2个问题

1. 点击搜索按钮时，会重新渲染并显示结果页面，但不会处理搜索按钮。

2. 当我点击关闭按钮时，我收到错误，如

  

危险：丢弃意外节点：＆＃34; ＆＃34 ;.

     

ReactMount：具有相同data-reactid的两个有效但不相等的节点：   .0.1

有人可以提供一些干净的解决方法吗？

一些解决方法，我试过

• 如果用文本区域或div替换输入元素，那么一切 工作正常。

• 此外，如果我在搜索按钮后添加一个空div，则为空 div是结果页面上的渲染，并且不显示搜索按钮。但JS错误仍然存​​在。

Answer 1

您在HTML标记中出错。

而不是：

<input type="text"> </input>

简单地写：

<input type="text" />