Reactjs :使用输入元素时的不变冲突

Reactjs : Invariant Violation when using input element

本文关键字：冲突 元素 输入 Reactjs      更新时间：2023-09-26

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

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

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

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

在这样做时，我面临 2 个问题

    单击搜索按钮

  1. 时，将重新呈现并显示结果页面，但不会释放搜索按钮。

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

危险：丢弃意外节点："。

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

有人可以给出一些干净的解决方法吗？

一些解决方法，我尝试了

  • 如果您用文本区域或div 替换输入元素，则所有内容工作正常。

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

您在 HTML 标记中出错。

而不是：

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

简单地写：

<input type="text" />
相关文章：