组件的三大属性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/. ...
随机推荐
- 深入学习sequoiadb巨杉数据库及python连接方式
随着公司日益复杂与多变的需求,以及迅速扩展带来的海量数据业务,我们需要在提供高效服务的同时,降低其设备与程序维护成本.算了,不吹了,说白了就是需要从巨杉数据库中抓取大量的数据,但是我现在不会,所以需要 ...
- spring-boot-2.0.3之redis缓存实现，不是你想的那样哦！
前言 开心一刻 小白问小明:“你前面有一个5米深的坑,里面没有水,如果你跳进去后该怎样出来了?”小明:“躺着出来呗,还能怎么出来?”小白:“为什么躺着出来?”小明:“5米深的坑,还没有水,跳下去不死就 ...
- python学习笔记02--列表和元组
一.简介 数据结构是通过某种方式组织在一起的数据元素的集合. 序列是python中最基本的数据结构,python中包含6种内建的序列,分别是列表.元组.字符串.Unicode字符串.buffer对象和 ...
- Infopath 2013 通过UserProfileService读取AD用户信息
我刚刚看过什么C#文章获得当前用户使用Web服务的详细信息. 其实无需编写任何代码,可以实现完全相同的结果.所以我在这里简单的介绍一下: *如果你已经熟悉这个,这个篇文章可以跳过. *此介绍是建立在I ...
- c# 二进制序列化
public static T Deserialize<T, S>(S stream) where S : Stream where T : class, new() { using (s ...
- [PHP] 算法-数组中出现次数超过一半的数字的PHP实现
数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如果不存在 ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- 【代码笔记】Web-JavaScript-JavaScript 变量
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 【备忘】SQL语句增加字段、修改字段、修改类型、修改默认值
一.修改字段默认值 alter table 表名 drop constraint 约束名字 ------说明:删除表的字段的原有约束 alter table 表名 add constraint 约束名 ...
- SVM中径向基函数与高斯核的区别 Difference between RBF and Gaussian kernel in SVM
Radial Basis Functions (RBFs) are set of functions which have same value at a fixed distance from a ...