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动画效果类封装代码
Aug 28 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
简单理解vue中Props属性
Oct 27 Javascript
学习vue.js计算属性
Dec 03 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
详解Vue.js 响应接口
Jul 04 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命名空间(Namespace)的使用详解
2013/05/04 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php文件系统处理方法小结
2016/05/23 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php实现等比例压缩图片
2018/07/26 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
js判断节假日实例代码
2017/12/27 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
C#怎么让一个窗口居中显示?
2015/10/20 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
技术总监岗位职责
2013/12/05 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
讲座通知范文
2015/04/23 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle