React学习之受控组件与数据共享实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了React学习之受控组件与数据共享。分享给大家供大家参考,具体如下:

在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会自己储存值,并且根据用户输入进行更新。但在React中,可变的值通常保存在组件的state中,并且只能用 setState() 方法进行更新。为了解决二者的矛盾,可以让HTML元素不再自己储存数据,而使用来自于react的state。也就是说HTML元素把数据保存在react组件的state中,并根据state值来渲染更新HTML的内容。这种值由React控制的表单元素称为受控组件。

1、input

例如将input输入的名字保存在state.name中,并且设置input显示的value值为state.name。当input中输入变化时,onChange触发updateName函数更新name值,从而使input中显示的value发生变化。当点击提交按钮时onClick触发submit()方法来阻止默认的提交,并打印提示信息:

class ControlledForm extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:''
  };
  this.updateName=this.updateName.bind(this);
  this.submit=this.submit.bind(this);
 }
 updateName(e){        //在调用函数时会默认传入时间参数e
  this.setState({
   name:e.target.value    //更新name的值为input中输入的值
  })
 }
 submit(e){          //自己定义点击submit后的操作
  console.log("姓名"+this.state.name+"提交成功");
  e.preventDefault();     //阻止表单默认提交行为
 }
 render(){
  return (
   <form onSubmit={this.submitForm}>
     <label>
       姓名:
       <input type="text" value={this.state.name} onChange={this.updateName} />
     </label>
     <input type="submit" value="提交" onClick={this.submit} />
   </form>
  )
 }
}

使用受控组件使得页面的数据都处于react的控制之下,而且可以对其数据进行处理之后再渲染到页面上。

2、textarea

在React中使用<textarea>:为了对textarea的输入内容进行控制,react中的textarea像input一样由value来控制其显示的值,并且通过e.target.value将textarea中的值存入state中。textarea的使用也由闭合式标签<textarea></textarea>变为开放式标签:

<textarea value={this.state.text} onChange={this.updateText} />

3、select

同理,在React中的<select>也通过value来控制哪个option的选中,并通过e.target.value将选中的option的值传给state。例如和this.state.sex值相同的option会被显示选中

<select value={this.state.sex} onChange={this.updateSex}>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

4、利用name处理多个受控组件

如上,我们需要为每个受控组件都设置更新方法onChange,而且每个组件的更新方法都很类似,这样看起来很麻烦,我们可以根据name属性区分不同的组件所对应的state值,利用一个函数来实现多个组件state值的更新:

<select value={this.state.sex} name="sex" onChange={this.updateForm}>
updateForm(e){
 let name=e.target.name;     //获取组件的name
 let value=e.target.value;    //获取组件的值value
 this.setState({
  [name]:value         //为不同name的组件设置value
 })
}

在setState方法中,通过ES6的语法计算属性[],在中括号中指定要更新的属性名的表达式来更新不同的state。例如当select调用updateForm()时,name="sex",value="male",则通过setState将state.sex值设为male。

5、组件间数据共享

当两个组件要同时使用一个变量时,由于state只能被它所定义的组件修改、访问,因此不能把state赋给某个组件,而应该将state提升至两个组件最近的公共父组件,父组件再通过props将值传递给子组件,这样两个子组件就都可以访问了。那么子组件怎么去修改父组件的state呢?子组件通过props属性来调用父组件的方法从而修改父组件的state,这样两个组件就通过父组件实现了对state的共享。例如父组件Parent的一个子组件ChildInput负责接收用户的输入,保存在state.text中,在另一个子组件ChildShow中显示用户的输入:

class Parent extends React.Component{
 constructor(props){
  super(props);
  this.state={
   text:''
  };
  this.updateText=this.updateText.bind(this);
 }
 updateText(value){
  this.setState({
   text:value
  })
 }
 render(){
  return (
   <fieldset>
     <legend>提升state</legend>    //父组件updateInput属性指向updateText方法
     <ChildInput text={this.state.text} updateInput={this.updateText}/>
     <ChildShow text={this.state.text} />
   </fieldset>
  )
 }
}
class ChildInput extends React.Component{
 constructor(props){
  super(props);
  this.handleChange=this.handleChange.bind(this);
 }
 handleChange(e){    //在子组件的方法中调用父组件的updateInput更新text的值
  this.props.updateInput(e.target.value);
 }
 render(){
  return (
   <div>
     <label>
       请输入:
       <input type="text" value={this.props.text} onChange={this.handleChange}/>
     </label>
   </div>
  )
 }
}
class ChildShow extends React.Component{
 constructor(props){
  super(props);    //通过调用父组件构造方法将父组件的props传递给子组件
 }
 render(){
  return (
   <div>
     <p>输入为:{this.props.text}</p>
   </div>
  )
 }
}
ReactDOM.render(
 <Parent/>,
 document.getElementById('app')
)

运行结果如图:

React学习之受控组件与数据共享实例分析

上例在react中的数据流动如下:

1、当在input中中输入内容时,input内容改变onChange触发ChildInput组件的handleChange方法,该方法通过this.props调用父组件updateInput方法并传递输入的内容e.target.value。

2、父组件Parent在引用子组件ChildInput时为其定义updateInput属性为this.updateText方法,因此触发updateText方法,在该方法中接收子组件传递的参数value,并通过setState方法修改state.text的值。

3、当state.text值发生改变时,父组件Parent通过属性props将值传递给子组件ChildInput与ChildShow,引起子组件属性改变,从而子组件重新渲染页面内容。

希望本文所述对大家React程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
React组件生命周期详解
Jul 03 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
JS实现音乐导航特效
Jan 06 #Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 #Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 #Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 #Javascript
You might like
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python找出最小的K个数实例代码
2018/01/04 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
大学生旷课检讨书
2014/01/22 职场文书
追悼会子女答谢词
2014/01/28 职场文书
五五普法心得体会
2014/09/04 职场文书
个人德育工作总结
2015/03/05 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书