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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
PHP学习之正则表达式
2011/04/17 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
详解Vue方法与事件
2017/03/09 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
python实现计算倒数的方法
2015/07/11 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
使用python实现接口的方法
2017/07/07 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
公立医院改革实施方案
2014/03/14 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
学风建设演讲稿
2014/09/12 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python