警告：输入正在更改文本类型的受控输入，使其不受控制

Question

实施反应反应堆的正确方法输入类型复选框组件

我在实现remstrap输入类型复选框组件方面遇到了一些麻烦，我不知道我是否在实现中做错了什么，但是当我设置状态以获取输入时，浏览器显示错误检查价值。

错误

Warning: Input is changing a controlled input of type text to be uncontrolled. 
Input elements should not switch from controlled to uncontrolled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the 
component.

我读到了不受控制的组件和受控组件的使用。我试图使用ref属性，但我仍然找不到解决这个问题的方法。我很感激你能给我的任何帮助。感谢

  

图书馆versión

     

  
• 发生反应，#15.6.1
  
• reactstrap #4.8.0
  
• 组件：<Input type="checkbox" />
  
• 浏览器：Chrome
  

这是仅包含反应组件类代码的链接

  

gist code link

Answer 1

我的猜测是您使用未定义状态来加载<Input>组件的值。

例如，如果你像这样初始化状态：

this.state = { person: {} };

您的输入是：

<Input value={this.state.person.first} name="first" onChange={this.handleChange}/>

当您的组件初始化时，它将具有价值undefined，例如<Input value={undefined}/>因此你将从受控状态转变为不受控制的状态。

以下是一个简单的解决方法：

<Input value={this.state.person.first||''} name="first" onChange={this.handleChange}/>