react中受控组件相关的warning
2024-10-21 05:36:02
在表单中,报如下的错,意思是非受控的输入框变成了受控的,报错信息如下
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
className="form-control"
name="productName"
placeholder="请输入商品名称"
value={this.state.detail.productName || ""}
onChange={(e)=>{this.inputValueChange(e)}}
/>
该元素将value绑定在this.state.detail对象中,obj对象在componentDidMount生命周期中进行初始化
原因:
因为在第一次render组件时,this.state.obj={},于是this.state.detail.productName为undefined,于是input接受到的就是value={undefined}
当ReactDOM检测这个元素是不是受控时,它的判断条件是value!=null,注意是!=而不是!==,
又由于undefined==null,所以判断该组件是非受控组件
而我又在input元素上绑定了onChange方法改变了value,将它变成了受控组件,所以产生了报错信息
解决办法
在constructor中修改this.state,给detail设置一个默认的初始值,如下所示
this.state={
detail:{
productName: '',
}
}
最新文章
- MySql LIKE 查找带反斜线“\”的记录
- 搭建coreseek(sphinx+mmseg3)详细安装配置+php之sphinx扩展安装+php调用示例
- Perl 内部结构详解
- [BZOJ 1006] [HNOI2008] 神奇的国度 【弦图最小染色】
- SVNclient安装与使用
- python基本语法-函数与异常
- ORA-01157,记一次Oracle故障恢复过程
- Entity Framework - 基于外键关联的单向一对一关系
- 对deep learning的第一周调研
- fitnesse - 用例创建编辑、管理、执行和日志
- vscode设置中文语言
- 服务注册中心之ZooKeeper系列(一)
- 十二、u-boot 调试--串口修改
- Linux中常用命令
- ERROR! The server quit without updating PID file (/application/mysql-5.6.40/data/db01-51.pid).
- Flex NumberFormatter 数值的格式化
- 通过curl模拟多线程抓取网页(curl_multi_*)
- IDEA的学习总结
- ABAP术语-Update Data
- py2exe使用总结
热门文章
- MVC,MVP 和 MVVM 的图示(转)
- sublime3中如何快速生成html头部信息
- grafana 安装- 曲线图展示每秒新增数据量
- UOJ#328. 【UTR #3】量子破碎
- 转:ubuntu 18.04 LTS 安装 java10(JDK) 及问题说明
- com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/NOTICE
- elixir case cond if
- CentOS7系列--3.1CentOS7中配置NFS服务
- Kubernetes核心概念简介
- SLAM会被深度学习方法取代吗?