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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
javascript实现前端分页功能
Nov 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php阳历转农历优化版
2016/08/08 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
Python实现微信机器人的方法
2019/09/06 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
护士实习自我鉴定
2013/10/22 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
新手上路标语
2014/06/20 职场文书
幼儿老师求职信
2014/06/30 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
初中语文教学随笔
2015/08/15 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书