react中受控组件相关的warning

问题

今天在做作业的过程中,发现了一个报错信息,虽然不是error,但还是研究了一下

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

这个警告大概就是说,组件将非受控的输入框变成了受控的,需要决定输入元素在组件生命周期中是受控的还是非受控的
我写的input元素如下:

<input type="text" name="busname"  
value={this.state.obj.busname} placeholder="请输入公交线路名称"/>

该元素将value绑定在this.state.obj对象中,obj对象在componentDidMount生命周期中进行初始化

解决过程

度娘搜索了一下找到了问题产生的原因(问题解决参考

因为在第一次render组件时,this.state.obj={},于是this.state.obj.busnameundefined,于是input接受到的就是value={undefined}
当ReactDOM检测这个元素是不是受控时,它的判断条件是value!=null,注意是!=而不是!==
又由于undefined==null,所以判断该组件是非受控组件
而我又在input元素上绑定了onChange方法改变了value,将它变成了受控组件,所以产生了报错信息
解决办法
在constructor中修改this.state,给obj设置一个默认的初始值,如下所示

this.state={
	 obj:{
		 businterval: '',
		 busname: '',
		 endport: '',
		 everytime: '',
		 startport: '',
		 starttime: '
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值