React学习笔记四——受控组件和非受控组件

最新推荐文章于 2022-07-16 09:02:26 发布

前端探险家

最新推荐文章于 2022-07-16 09:02:26 发布

阅读量772

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/qq_44182284/article/details/118179583

版权

react 专栏收录该内容

16 篇文章 12 订阅

订阅专栏

受控组件

页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取
推荐使用受控组件，可以避免对ref的使用

受控组件案例普通代码

<head>
  <div id="test"></div>
</head>
//引入一些react核心库和babel
<script type="text/javascript"  src="..."></script>

<script type="text/babel">
 //创建类式组件
  class Demo extends React.Component {
      state = {
         userName:null,
         passWord:null
      }
      saveFormData= (formType,value) => {
          this.setState({[formType]:event.target.value})
      }
      handleSubmit = (event) => {
         event.preventDefault() //阻止表单提交
         const {userName,passWord} = this.state
         console.log(`用户名是${userName},密码是${passWord}`)
      }
	  render() {   
	    return (
	      <form onSubmit={this.handleSubmit}>
	          用户名：<input onChange={(c) => {this.saveFormData('userName',c.target.value)}} type="text"  name="userName"/>
	          密码：<input  onChange={(c) => {this.saveFormData('passWord',c.target.value)}} type="text"  name="passWord"/>
	          <button>登录<button>
	      </form>
	    )
	  }
  } 
 //渲染虚拟DOM到页面
 ReactDOM.render(<Demo/> ,document.getElementById('test'))
</ script>

延伸知识（高阶函数、函数合理化）

高阶函数
如果一个函数符合下面两个规范中的任何一个，该函数就是高阶函数
1.若A函数，接受的参数是一个函数，那么A函数就是一个高阶函数；
2.若A函数，调用的返回值依然是个函数，那么A函数就是一个高阶函数；
常见的高阶函数：promise、定时器、数组的一些方法

函数柯里化
通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式；

function sum(a,b,c){ //普通函数
    return a+b+c
 }
sum(1,2,3) //6

function(a){ //函数柯里化写法
   return (b) => {
     return (c) => {
        return a+b+c
     }
   }
}
sum(1)(2)(3) // 6

受控组件案例（通过高阶函数、函数柯里化的代码写法）

...
<script type="text/babel">
 //创建类式组件
  class Demo extends React.Component {
      state = {
         userName:null,
         passWord:null
      } 
      saveFormData = (formType) => { //高阶函数 函数柯里化
        return (event) => {
             this.setState({[formType]:event.target.value})
        }
      }
      handleSubmit = (event) => {
         event.preventDefault() //阻止表单提交
         const {userName,passWord} = this.state
         console.log(`用户名是${userName},密码是${passWord}`)
      }
	  render() {   
	    return (
	      <form onSubmit={this.handleSubmit}>
	          用户名：<input onChange={this.saveFormData('userName')} type="text"  name="userName"/>
	          密码：<input  onChange={this.saveFormData('passWord')} type="text"  name="passWord"/>
	          <button>登录<button>
	      </form>
	    )
	  }
  } 
 //渲染虚拟DOM到页面
 ReactDOM.render(<Demo/> ,document.getElementById('test'))
</ script>

非受控组件

需要通过ref去操作输入类DOM的节点信息，拿到输入的value值
不推荐使用，项目中尽量要避免使用ref

非受控组件案例代码

<head>
  <div id="test"></div>
</head>
//引入一些react核心库和babel
<script type="text/javascript"  src="..."></script>

<script type="text/babel">
 
 //创建类式组件
  class Demo extends React.Component {
      handleSubmit = (event) => {
       event.preventDefault() //阻止表单提交
       const {userName,passWord} = this
       console.log(`用户名是${userName.value},密码是${passWord.value}`)
      }
	  render() {   
	    return (
	      <form onSubmit={this.handleSubmit}>
	          用户名：<input ref={c => this.userName = c} type="text"  name="userName"/>
	          密码：<input  ref={c => this.passWord= c} type="text"  name="passWord"/>
	          <button>登录<button>
	      </form>
	    )
	  }
  } 
 //渲染虚拟DOM到页面
 ReactDOM.render(<Demo/> ,document.getElementById('test'))
</ script>

前端探险家

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
React学习笔记四——受控组件和非受控组件

受控组件页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取推荐使用受控组件，可以避免对ref的使用受控组件案例代码<head> <div id="test"></div></head>//引入一些react核心库和babel<script type="text/javascript" src="..."></script><script type="text/ba
复制链接

扫一扫