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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近做一个React项目,所有组件都使用了函数式组件,遇到一个父组件调用子组件方法的问题,下面这篇文章主要给大家介绍了关于React父组件调用子组件中方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了react 中 mobx的使用案例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了React实现评论的添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
React路由的history对象的插件history的使用解读
这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最近有不少伙伴询问react的代理配置,自己也去试验了一下发现不少的问题,在这就将所遇到的心得分享出来,这篇文章主要给大家介绍了关于React开启代理的2种实用方式的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了详解React 在服务端渲染的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了React+CSS 实现绘制竖状柱状图，文章围绕主题展开详细的内容介绍。具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要为大家介绍了React构建简洁强大可扩展的前端项目架构实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态（state）和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下2023-11-11
最新评论