react中value与defaultValue的区别及说明
react中value与defaultValue的区别
在日常开发的过程中,我们经常会使用input输入框,有时会需要使用value绑定数据,针对这一点,react提出了一个概念,分为了约束性组件和非约束性组件。
之前正常使用的时候我们只需要这样写:
<input value={绑定的数据} type='text'/>
在react中这样的写法会出现一个错误,提示你应该使用onChange来监听这个input或者使用defaultValue来绑定数据。这样可以消除这个错误。
那么当使用defaultValue的时候:
<input defaultValue={绑定的数据} type='text'/>
这个时候就是一个非约束性组件,其实就是原生DOM中的value属性,这样写出来的组件,其value值就是用户输入的内容,和react没有关系,完全不管输入的过程。
当使用onChange的时候:
<input value={绑定的数据} type="text" onChange={this.handleChange}/>
这个时候就是一个约束性组件,这里value不再是写死的值,他是你所绑定的数据,绑定的数据是由this.handleChange负责管理的。这个时候实际上input的value根本不是用户输入的内容。而是onChange事件触发之后,由this.state导致了一次重新渲染,不过react会优化这个过程。
注意:
如果在使用input时只需要获取model里的值时,使用defaultValue就可以了。
如果需要获取model的值并且还需要改变它的时候,就需要使用value结合onChange事件就可以了。
react select标签defaultValue和value踩坑日记
最近在写react项目,需要设置下拉框默认值.
第一版本
使用defaultValue,发现刷新页面,数据错误
分析:defaultValue只在页面挂载时渲染一次,后续数据发生变化,不再重新渲染
<div className="month"> <select defaultValue="dayjs().get("month")" onChange={(e) => onChange(e)}> {months.map(month => <option key={month} value={month} >{month}</option>)} </select> 月 </div>
第二版
修改为value,点击select,发现数据更新了,但页面不更新;
分析:value需要接收一个动态数据,dayjs().get(“month”)是一个死值。
<div className="month"> <select value="dayjs().get("month")" onChange={(e) => onChange(e)}> {months.map(month => <option key={month} value={month} >{month}</option>)} </select> 月 </div>
第三版
使用value绑定动态数据,且绑定onChange监听函数
const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { let date = e.target.value if (date.length === 4) { setSelectDate({ year: date, month: selectDate.month }) } else { setSelectDate({ year: selectDate.year, month: date }) } } <div className="month"> <select value={selectDate.month} onChange={(e) => onChange(e)}> {months.map(month => <option key={month} value={month} >{month}</option>)} </select> 月 </div>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Remix 后台桌面开发electron-remix-antd-admin
这篇文章主要为大家介绍了Remix 后台桌面开发electron-remix-antd-admin的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-04-04详解react-router 4.0 下服务器如何配合BrowserRouter
这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12React Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11Shopee在React Native 架构方面的探索及发展历程
这篇文章主要介绍了Shopee在React Native 架构方面的探索,本文会从发展历史、架构模型、系统设计、迁移方案四个方向逐一介绍我们如何一步步地满足多团队在复杂业务中的开发需求,需要的朋友可以参考下2022-07-07
最新评论