前言

上一篇文章咱们零碎解说了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：示意整个<select></select>标记对。
  • this.refs.course.options：示意所有的<option>标记对组成的汇合。
  • this.refs.course.options.length：示意<option>标记对的个数。
  • this.refs.course.options[i]：示意索引值为i的那一个<option>标记对。
  • this.refs.course.options[i].selected：示意索引值为i的那一个<option>标记对是否被选中。
  • this.refs.course.options[i].value：示意索引值为i的那一个<option>标记对value属性的取值。
例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有比拟纯熟的应用经验。

对于作者

小海前端，具备18年Web我的项目开发和前后台培训教训，在前端畛域著有较为零碎的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发畛域都有较为深的造诣。入住Segmentfault，心愿可能更多的结识Web开发畛域的同仁，将Web开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。