React（7）React非受控组件的使用
文章目录
- 前言
- 一、非受控文本框的使用
- 二、非受控select菜单的使用
- 三、非受控select列表的使用
- 四、React文件域的使用
- 总结
- 关于作者
前言
上一篇文章我们系统讲解了React表单受控组件的使用，对于文本框、列表、菜单来说，采用value-onChange组合来实现。对于单选框、复选框来说，采用checked-onChange组合来实现。除了受控组件，React还提供了非受控组件，本篇文章来为大家讲解非受控组件的使用方法。
非受控组件是指表单元素的操作不受组件中state区数据的控制，也不需要将表单元素的状态与任何数据双向绑定，这种操作方式下的表单元素被称为“非受控组件”。非受控组件与受控组件不同，要结合标记对共同使用。
一、非受控文本框的使用
非受控文本框在使用时要遵循下列使用规范：
- 非受控文本框使用defaultValue属性来设置初始数据，该属性在react中是只读属性，不能绑定state区数据，也不能重新赋值。
- 非受控文本框需要设置ref属性，以保证在表单的提交事件中通过this.refs来获取文本框中用户输入的内容。
- 在使用非受控组件时，需要为标记设置onSubmit事件，即表单的提交事件。在表单中具备提交功能的按钮被单击时，该事件会自动触发。
例1：在页面中有一个用于输入用户昵称的文本框，在按钮单击时将用户输入的昵称在控制台中显示。
const {
Component,Fragment} = React;
class App extends Component{
frmSubmit(event){
event.preventDefault()
let nick=this.refs.userNick.value;
console.log(nick)
}
render(){
return (
<Fragment>
<form onSubmit={
(event)=>this.frmSubmit(event)}>
<label htmlFor="nick">您的昵称</label>
<p><input ref="userNick" type="text" id="nick" defaultValue="" /></p>
<button>提交</button>
</form>
</Fragment>
)
}
}
从上述代码中可以看出，非受控组件在使用时是不需要state区的，defaultValue之所以设置为空字符串，因为该属性只用来设置文本框的默认取值，如果没有默认取值，该属性也可以省略不写。
二、非受控select菜单的使用
非受控select菜单和非受控文本框的使用方法是一样的。
例2：页面中有一个用于选择所学专业的select下拉菜单，单击按钮在控制台中显示用户选择的专业项。
const {
Component,Fragment} = React;
class App extends Component{
frmSubmit(event){
event.preventDefault()
let spec=this.refs.userSpec.value;
console.log(spec);
}
render(){
return (
<Fragment>
<form onSubmit={
(event)=>this.frmSubmit(event)}>
<div>
<label htmlFor="spec">所学专业：</label>
<select ref="userSpec">
<option value="计算机网络">计算机网络</option>
<option value="计算机应用">计算机应用</option>
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="计算机信息管理">计算机信息管理</option>
<option value="计算机软件工程">计算机软件工程</option>
</select>
</div>
<button>提交</button>
</form>
</Fragment>
)
}
}
三、非受控select列表的使用
非受控select列表由于具备多选功能，因此在处理时更接近原生JavaScript中DOM操作的方式。
例如：一个ref属性取值为course的非受控select列表，有下列操作：
- this.refs.course：表示整个标记对。
- this.refs.course.options：表示所有的
- this.refs.course.options.length：表示
- this.refs.course.options[i]：表示索引值为i的那一个
- this.refs.course.options[i].selected：表示索引值为i的那一个
- this.refs.course.options[i].value：表示索引值为i的那一个
例3：页面中有一个用于选择选修课程的select列表，单击按钮在控制台中显示用户选中的多个课程项。
const {
Component,Fragment}=React;
class App extends Component{
frmSubmit(event){
event.preventDefault();
let selectedCourse=[];
for(let i=0;i<this.refs.userCourse.options.length;i++){
if(this.refs.userCourse.options[i].selected){
selectedCourse.push(this.refs.userCourse.options[i].value);
}
}
console.log(selectedCourse);
}
render(){
return (
<Fragment>
<form onSubmit={
(event)=>this.frmSubmit(event)}>
<div>
<label htmlFor="course">选修课程：</label>
<select ref="userCourse" id="course" multiple size="5">
<option value="高等数学">高等数学</option>
<option value="数据结构">数据结构</option>
<option value="软件工程">软件工程</option>
<option value="微机原理">微机原理</option>
<option value="操作系统">操作系统</option>
</select>
</div>
<button>提交</button>
</form>
</Fragment>
)
}
}
上述代码中，在表单的提交事件中，设置了一个名为selectedCourse的数组，该数组用来存放用户已经选中的列表项。当用if语句判断某个项处于被选中状态时，将该项的value属性取值送入selectedCourse数组作为数组元素。
四、React文件域的使用
首先要知道，在React中，文件域是没有受控组件的，都是非受控组件。处理时要借助HTML5中有关FileList类和File类的相关属性和方法来实现。
例如：一个ref属性取值为upload的非受控文件域，有下列操作：
- upload.files：返回由用户所选择的所有文件构成的集合，即FileLIst类的实例。
- upload.files.length：返回用户所选择的所有文件的个数。
- upload.files.item(i)：返回由用户所选择的所有文件中索引值为i的文件，即File类的实例。
- upload.files.item(i).type：返回由用户所选择的所有文件中索引值为i的文件的MIME类型名。
- window.URL.createObjectURL(upload.files.item(i))：返回由用户所选择的所有文件中索引值为i的文件的Blob地址。
例4：在页面中有一个用于上传头像的文件域，单击按钮在控制台中显示用户所选文件的Blob地址。
const {
Component,Fragment}=React;
class App extends Component{
frmSubmit(event){
event.preventDefault();
const {
upload} = this.refs;
if(upload.files.length===0){
alert("请选择上传的文件");
}else{
let file=upload.files.item(0);
let reg=/^image\/(jpg|jpeg|png|gif)$/;
if(reg.test(file.type)){
let blob=window.URL.createObjectURL(file);
console.log(blob);
}else{
alert("请选择图片格式的文件");
}
}
}
render(){
return (
<Fragment>
<form onSubmit={
(event)=>this.frmSubmit(event)}>
<div>
<label htmlFor="course">上传头像：</label>
<input type="file" name="avatar" ref="upload" />
</div>
<button>提交</button>
</form>
</Fragment>
)
}
}
总结
本文是React系列教程的第七篇文章，主要为大家讲解了React非受控组件的使用方式。整体来说非受控组件在使用时是采用ref来实现对表单元素的引用，再结合表单的onSubmit事件来实现的。不同的表单元素在使用非受控组件时往往有不同的方式，这些处理方式更类似于原生JavaScript的DOM操作，这就要求大家对原生JavaScript有比较熟练的使用经历。
第一讲 初识React框架
第二讲 认识JSX语法格式
第三讲 React组件
第四讲 React 父子组件之间的通信
第五讲 React兄弟组件之间的通信
第六讲 React受控组件的使用
关于作者
小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住CSDN，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。