state
初始化状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类组件</title>
</head>
<body>
<!-- import kernel lib -->
<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>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel">
//1.创建 类组件，实例化时需要传入参数
//首字母大写
class Person extends React.Component{
//构造函数
constructor(props){
super(props)
//写自己的代码
this.state = {isTrue:false}
}
//必须有render方法
render(){//放在类的原型对象上，供实例调用；
const {isTrue} = this.state //对象赋值给一个变量，并通过该变量获取对应属性的值
console.log("组件实例对象：",this)
//必须有返回值 VDOM节点
return <div>当前人物：{this.state.isTrue?"小明":"小李"}</div>
}
}
//2.渲染类组件，大写首字母的闭合标签
ReactDOM.render(<Person/>,document.getElementById("list"))
/*
找到该组件标签，实例化类对象，对象.render，将返回的VDOM转为真实DOM，呈现页面
*/
</script>
</body>
</html>
添加事件，动态修改state
原生js事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定事件</title>
</head>
<body>
<div id="b1">按键1</div>
<div id="b2">按键2</div>
<div id="b3" onclick="func();">按键3</div>
<script>
// document.getElementById("b1").addEventListener("click",function(){
// alert("button1 is clicked")
// })
//1.绑定事件监听
document.getElementById("b1").addEventListener("click",()=>{alert("b1 is clicked")})
//2.赋值onclick属性
document.getElementById("b2").onclick = (()=>{alert("按键2被点击了")})
//3.内联onclick属性
function func(){
alert("按键3被点击了")
}
</script>
</body>
</html>
三种方法均可以在jsx中使用
建议使用属性内联的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类组件</title>
</head>
<body>
<!-- import kernel lib -->
<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>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel"> //babel内部开启严格模式 直接调用函数，this指向undefined
//1.创建 类组件，实例化时需要传入参数
//首字母大写
class Person extends React.Component{
//构造函数
constructor(props){
super(props)
//写自己的代码
this.state = {isTrue:false}
//解决this指向丢失的问题
this.clickFunc = this.func.bind(this)
//此时clickFunc可以直接调用，并且
}
//必须有render方法
render(){//放在类的原型对象上，供实例调用；
const {isTrue} = this.state //对象赋值给一个变量，并通过该变量获取对应属性的值，多个变量逗号连接
console.log("组件实例对象：",this)
//必须有返回值 VDOM节点
return <div onClick={this.clickFunc}>当前人物：{this.state.isTrue?"小明":"小李"}</div>
//点击div时，onClick严格模式下回调func函数，this指向丢失，那么需要bind 修改this指向
//解决this 丢失问题
//构造器中加入this.func = this.func.bind(this)从原型对象中拿func，绑定到this本身
}
// 原生的onclick/onblur等------->React:onClick/onBlur/onMouseOver
func(){
console.log("按键被点击");
console.log(this) //严格模式内，函数直接调用，this 指向丢失
}
}
//2.渲染类组件，大写首字母的闭合标签
ReactDOM.render(<Person/>,document.getElementById("list"))
/*
找到该组件标签，实例化类对象，对象.render，将返回的VDOM转为真实DOM，呈现页面
*/
</script>
</body>
</html>
更改this的指向
function a(){
console.log(this);
}
//直接调用
a();//window
//将函数a的this指向{name:"jack"}，并返回一个新函数，只是this指向与a不同
const b = a.bind({name:"jack"})
b();//this is {name:"jack"}
//更改this指向不受严格模式的影响
点击设置state
使用setState
//...
clickFunc(){
const isTrue = this.state.isTrue;//获取值
//更改值
this.setState({isTrue:!isTrue})//合并到原来的state
//注意不能直接修改state的值，必须调用setState API
}
点击时，constructor只执行一次，render执行1+n，clickFunc执行n次
其中n为点击的次数
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类组件</title>
</head>
<body>
<!-- import kernel lib -->
<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>
<!-- create container -->
<ul id="list"></ul>
<script type="text/babel">
//1.创建 类组件，实例化时需要传入参数
//首字母大写
class Person extends React.Component{
//构造函数
constructor(props){
super(props)
//写自己的代码
this.state = {isTrue:false}
this.clickFunc = this.func.bind(this)
//此时this.clickFunc可以在严格模式下，直接调用，并且this指向当前实例
}
//必须有render方法
render(){//放在类的原型对象上，供实例调用；
const {isTrue} = this.state //对象赋值给一个变量，并通过该变量获取对应属性的值
console.log("组件实例对象：",this)
//必须有返回值 VDOM节点
return <div onClick={this.clickFunc}>当前人物：{this.state.isTrue?"小明":"小李"}</div>
}
// 原生的onclick/onblur等------->React:onClick/onBlur/onMouseOver
func(){
console.log("按键被点击");
console.log(this) //this 指向丢失，通过func.bind({})重新绑定
//通过setState API修改state
const isTrue = this.state.isTrue
this.setState({isTrue:!isTrue})//合并到state中
}
}
//2.渲染类组件，大写首字母的闭合标签
ReactDOM.render(<Person/>,document.getElementById("list"))
/*
找到该组件标签，实例化类对象，对象.render，将返回的VDOM转为真实DOM，呈现页面
*/
</script>
</body>
</html>
state的简写方式
- 类中的类属性，直接给实例
class Person{
sex = 'Male';
constructor(name,age){//传入的参数
this.name = name;
this.age = age;
//实例属性
}
}
//实例化的对象，具有三个属性
- ()=>{} 这种箭头函数没有this，会使用外层的this
function func1(){
console.log(this);//window
let a = ()=>{console.log(this)}
a();
}
const func2 = func1.bind({name:"jack"})
func2();//this is {name:"jack"}
- 简化state编码
//定义类组件
class Person extends React.Component{
state = {isTrue:true}
render(){
return <div onClick={this.clickFunc}>姓名是：{this.state.isTrue?"jack":"tom"}</div>
}
//自定义的方法，实现事件的响应
clickFunc = ()=>{
let isTrue = this.state.isTrue
//更改属性
this.setState({isTrue:!isTrue})
}
}
state属性总结
- state是类组件实例对象最终要的一个属性，必须给一个对象
- 通过更改state，来更改页面
- render方法中的this为实例对象，但自定义的函数中的this指向为undefined，通过bind() 强制更改；或者使用箭头函数
- state属性不能直接修改，必须通过setState
props
下一篇
refs
下一篇
上一篇：js框架----react.js 2 模块、组件 下一篇
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
