组件的三大属性state,props,refs与事件处理
组件的三大属性state
state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
初始化指定
constructor() { super() this.state = { stateName1 : stateValue1, stateName2 : stateValue2 } }
读取显示
this.state.stateName1
更新状态-->更新界面(自动更新)
this.setState({stateName1 : newValue})
需求:自定义组件, 功能说明如下:
显示h2标题, 初始文本为: 你喜欢我,点击标题更新为: 我喜欢你
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_component_state</title> </head> <body> <div id="example"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下 1. 显示h2标题, 初始文本为: 你喜欢我 2. 点击标题更新为: 我喜欢你 */ // 1.定义组件 class Like extends React.Component { constructor(props) { // 初始化状态 super(props) this.state = { isLikeMe : false } // 将新增的方法的this强制绑定为组件对象 this.handleClick = this.handleClick.bind(this) // } // 这个是重写组件内的方法,所以this代表的是组件对象 render () { // 读取状态,最终要得到isLikeMe的值 // const isLikeMe = this.state.isLikeMe // 正常写法 const {isLikeMe} = this.state // 解构赋值的写法(es6的语法) return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我' : '我喜欢你'}</h2> } // 新添加的方法,内部的this默认不是组件对象,而是undefined handleClick () { const isLikeMe = !this.state.isLikeMe // 更新状态 this.setState({isLikeMe}) } } // 2.渲染组件 ReactDOM.render(<Like/>, document.getElementById('example')) </script> </body> </html>
组件的三大属性props
每个组件对象都会有props(properties的简写)属性,组件标签的所有属性都保存在props中,所有组件标签的属性的集合对象
作用:通过标签属性从组件外向组件内传递变化的数据 ,注意: 组件内部不要修改props数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>04_component_props</title> </head> <body> <div id="example1"></div> <div id="example2"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> // 1.定义组件 function Person(props) { return ( <ul> <li>姓名:{props.name}</li> <li>年龄:{props.age}</li> <li>性别:{props.sex}</li> </ul> ) } // 2.渲染组件标签 const p1 = { name: 'lina', age: 18, sex: '女' } ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('example1')) </script> </body> </html>
内部读取某个属性值
对props中的属性值进行类型限制和必要性限制,使用比较新的react版本,需要引入prop-types.js这个文件
// 对props中的属性值进行类型限制和必要性限制 Person.propTypes = { name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传,如果有默认值就不会报错 age: PropTypes.number.isRequired }
扩展属性: 将对象的所有属性通过props传递
// ...的作用:一种是打包(就是将一组数据打包到一起),一种是解包() ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
默认属性值
// 指定属性的默认值 Person.defaultProps = { age: 18, sex: '男' }
组件类的构造函数
class Person extends React.Component { render () { return ( <ul> <li>姓名:{this.props.name}</li> <li>年龄:{this.props.age}</li> <li>性别:{this.props.sex}</li> </ul> ) } }
需求: 自定义用来显示一个人员信息的组件
1). 如果性别没有指定, 默认为男
2). 如果年龄没有指定, 默认为18
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>04_component_props</title> </head> <body> <div id="example1"></div> <div id="example2"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/javascript" src="../js/prop-types.js"></script> <script type="text/babel"> // 1.定义组件 // function Person(props) { // return ( // <ul> // <li>姓名:{props.name}</li> // <li>年龄:{props.age}</li> // <li>性别:{props.sex}</li> // </ul> // ) // } class Person extends React.Component { render () { return ( <ul> <li>姓名:{this.props.name}</li> <li>年龄:{this.props.age}</li> <li>性别:{this.props.sex}</li> </ul> ) } } // 指定属性的默认值 Person.defaultProps = { age: 18, sex: '男' } // 对props中的属性值进行类型限制和必要性限制 Person.propTypes = { name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传 age: PropTypes.number.isRequired } // 2.渲染组件标签 const p1 = { name: 'lina', age: 18, sex: '女' } const p2 = { name: 'jack', age: 13, sex: '男' } // ...的作用:一种是打包(就是将一组数据打包到一起),一种是解包() ReactDOM.render(<Person {...p1}/>, document.getElementById('example1')) ReactDOM.render(<Person name={p2.name} age={p2.age}/>, document.getElementById('example2')) </script> </body> </html>
组件的三大属性refs
通过ref获取组件内容特定标签对象, 进行读取其相关数据
<input type="text" ref="content"/> // 绑定ref const input = this.refs.content // 获取ref
上面这个写法官方不建议这么写,可以使用下面这种,回调函数在组件初始化渲染完或卸载时自动调用,在组件中可以通过this.msgInput来得到对应的真实DOM元素
<input type="text" ref={input => this.msgInput = input}/> // 绑定ref alert(this.msgInput.value) // 获取ref
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_component_refs</title> </head> <body> <br> <div id="example"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下: 1. 界面如果页面所示 2. 点击按钮, 提示第一个输入框中的值 */ // 1. 定义组件 class Mycomponent extends React.Component { constructor (props) { super (props) this.showInput = this.showInput.bind(this) } showInput () { alert(this.msgInput.value) } render () { return ( <div> <input type="text" ref={input => this.msgInput = input}/> <button onClick={this.showInput}>提示输入</button> </div> ) } } // 2. 渲染组件标签 ReactDOM.render(<Mycomponent/>, document.getElementById('example')) </script> </body> </html>
组件中的事件处理
通过onXxx属性指定组件的事件处理函数(注意大小写)
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ,React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
onXxx={this.eventHandler}
在组件中添加事件处理方法,通过event.target得到发生事件的DOM元素对象
eventHandler(event) {}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_component_refs</title> </head> <body> <br> <div id="example"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> // 1. 定义组件 class Mycomponent extends React.Component { constructor (props) { super (props) this.handleBlur = this.handleBlur.bind(this) } handleBlur (event) { alert (event.target.value) } render () { return ( <div> <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/> </div> ) } } // 2. 渲染组件标签 ReactDOM.render(<Mycomponent/>, document.getElementById('example')) </script> </body> </html>
组件的三大属性state,props,refs与事件处理的更多相关文章
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React基础篇(2) -- state&props&refs
内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...
- 【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
随机推荐
- 修复Nginx 502错误:upstream sent too big header while reading response header from upstream
原文出处:https://www.cnblogs.com/jpfss/p/10237463.html 便于以后参考我复制了过来! cookies的值超出了范围我是说 看看了一下日志 错误502 ups ...
- Go语言程序结构分析初探
每一种编程语言都有自己的语法.结构以及自己的风格,这也是每种语言展现各自魅力及众不同的地方.Go也不例外,它简单而优雅,与此同时使用起来也很有趣.在本文中,我们将讨论以下几点: Go程序结构 如何运行 ...
- php扩展编译方法
linux下php已经编译,如何再为php增加新的扩展通过php自带的phpize,如我的phpize在/usr/local/php/bin/phpize1.到软件的官方或pecl.php.net去下 ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
- python解析处理snmp回显----snmp
查看服务端配置:https://www.cnblogs.com/dpf-10/p/9175409.html 查看内容示例: D:\python>snmpwalk -v 2c -c public ...
- Jenkins持续集成学习-Windows环境进行.Net开发4
目录 Jenkins持续集成学习-Windows环境进行.Net开发4 目录 前言 目标 Github持续集成 提交代码到Github 从Github更新代码 git上显示构建状态 自动触发构建 Gi ...
- 使用Asp.Net Core MVC 开发项目实践[第五篇:缓存的使用]
项目中我们常常会碰到一些数据,需要高频率用到但是又不会频繁变动的这类,我们就可以使用缓存把这些数据缓存起来(比如说本项目的导航数据,帖子频道数据). 我们项目中常用到有Asp.Net Core 本身提 ...
- Docker入门之一Docker在Window下安装
最近这几年,各个大公司都在打造自己的云平台,什么阿里云,华为云,腾讯云等等云,以及各种的微服务架构,其实在这当中Docker容器技术算是一个很重要的角色. 一.下载 在下载之前首先检查一下自己的电脑是 ...
- RestTemplate发送HTTP、HTTPS请求
RestTemplate 使用总结 场景: 认证服务器需要有个 http client 把前端发来的请求转发到 backend service, 然后把 backend service 的结果再返 ...
- 表数据量影响MySQL索引选择
现象 新建了一张员工表,插入了少量数据,索引中所有的字段均在where条件出现时,正确走到了idx_nap索引,但是where出现部分自左开始的索引时,却进行全表扫描,与MySQL官方所说的最左匹配原 ...