【问题标题】：Warning: Input is changing a controlled input of type text to be uncontrolled警告：输入正在将文本类型的受控输入更改为不受控制
【发布时间】：2018-01-13 17:59:43
【问题描述】：

react reactstrap输入类型复选框组件的正确实现方式

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

错误

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 属性，但我仍然找不到解决此问题的方法。我会很感激你能给我的任何帮助。谢谢

库版本

反应#15.6.1

reactstrap #4.8.0

组件：<Input type="checkbox" />

浏览器：Chrome

这是一个只有react组件类代码的链接

gist code link

【问题讨论】：

标签： reactjs

【解决方案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}/>

【讨论】：