React中value和defaultValue有何本质区别，具体应用场景是什么？

本文共计739个文字，预计阅读时间需要3分钟。

目录 + React中value与defaultValue的区别 + React + Select标签defaultValue和value踩坑日记 + 第一版 + 第二版 + 第三版 + 总结 + React中value与defaultValue的区别 + 在日常开发的过程中，我们经常会使用input输入框，E2E

目录

• react中value与defaultValue的区别
• react select标签defaultValue和value踩坑日记
• 第一版本
• 第二版
• 第三版
• 总结

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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。