Reactjs：使用输入元素时的不变违规

Question

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

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

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

这是同一 http://jsfiddle.net/rso3uk9f/ 的 JSFiddle

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

1. 单击搜索按钮时，会发生重新渲染并显示结果页面，但未释放搜索按钮。

2. 当我点击关闭按钮时，我会收到类似的错误

危险：丢弃意外节点：“”。

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

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

我尝试了一些解决方法

• 如果你用 text-area 或 div 替换输入元素，那么一切 工作正常。

• 另外，如果我在搜索按钮后添加一个空 div，那么空 div 在结果页面上呈现，搜索按钮不显示。但是仍然会出现 JS 错误。

Answer 1

您的 HTML 标记出错。

代替：

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

简单写：

<input type="text" />