乐趣区

关于react.js:React7React非受控组件的使用

前言

上一篇文章咱们零碎解说了 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 开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。

退出移动版