React组件实例的state属性有哪些具体应用场景？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1838个文字，预计阅读时间需要8分钟。
目录
一、State 1. 概念 2. State的简单用法 3. JS绑定事件 4. React绑定事件 5. React this指向问题 6. 修改state值 7. 代码简写
二、Props 1. 概念 2. 传递参数的基本方法、运算符传递参数 3. refs的定义 + 字符串形式
目录
- 一、 State
- 1.概念
- 2.State的简单用法
- 3.JS绑定事件
- 4.react 绑定事件
- 5.react this指向问题
- 6.修改state值
- 7.代码简写
- 二、props
- 1.概念
- 2.传参的基础方法、运算符传参
- 三、refs
- 定义
- 字符串形式的ref、回调函数下ref、createRef 创建ref容器
一、 State
1.概念
概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。
2.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>Document</title> <style> .btn{ width: 100px; height: 40px; background-color: red; } .on{ background-color: gray; } </style> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class IsLike extends React.Component { state = { flag:true } //箭头函数this指向上下文，静态不可改变 changeFlag=()=>{ this.setState({flag:!this.state.flag}) } render() { const {flag}=this.state return ( <div> <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button> </div> ) } } ReactDOM.render(<IsLike/>,document.getElementById('root')) </script> </body> </html>
编辑
3.JS绑定事件
let btn = document.getElementById('btn'); btn.addEventListener('click',function(){ alert('按钮被点击了!'); }) btn.onclick = function(){ alert('按钮被点击了!'); } function demo(){ alert('按钮被点击了'); }
4.react 绑定事件
render(){ return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> }
说明：
·onclick 变为 onClick。
·{函数名}返回值给click，加()就会直接调用。
5.react this指向问题
demo(){ console.log(this);//undefined console.log('事件被点击了'); }
举例说明：
class Person{ constructor(name,age) { this.name = name; this.age = age; } say(){ console.log(this); } } const p1 = new Person('张三',18); p1.say();//p1为实例对象 const p2 = p1.say; p2();//undefined 类采取是严格模式
6.修改state值
class MyClass extends React.Component{ constructor(props) { super(props); this.state = {isflag:true}; this.demo = this.demo.bind(this); }render(){ return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> } demo(){ this.setState({isflag:!this.state.isflag}) }} ReactDOM.render(<MyClass/>,document.getElementById('root'));
说明：
bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动
7.代码简写
class MyClass extends React.Component{ state = {isflag:true} render(){ return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> } demo = () => { this.setState({isflag:!this.state.isflag}) } } ReactDOM.render(<MyClass/>,document.getElementById('root'));
说明：
类中的属性直接赋值，省去构造函数。
自定义方法—用赋值语句的形式+箭头函数
二、props
每个组件对象都会有props(properties的简写)属性。
组件标签的所有属性都保存在props中。
props 是不可变的，只能通过 props 来传递数据。
2.传参的基础方法、运算符传参
其中先通过let创建了一个对象，在通过三点运算符，来遍历得到，对象里面的值
在通过对象结构得到props中的realname和age,GetName是Person组件的子组件，在Person中传值给GetName,GetName通过props接收
<!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>Document</title> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class GetName extends React.Component { render() { return ( <div>姓名：{this.props.realname}</div> ); } } class Person extends React.Component { render() { const {realname,age} = this.props return ( <div> <GetName realname={this.props.realname}/> <span>年龄：{age}</span> </div> ); } } let p1 = {realname:'张三',age:19} ReactDOM.render(<Person {...p1}/>,document.getElementById('root')) </script> </body> </html>
三、refs
定义
组件内的标签可以定义ref来标识自己。
字符串形式的ref、回调函数下ref、createRef 创建ref容器
字符串形势，是直接通过ref绑定值，通过在点击事件中获取ref的值，ref如同把整个input表单传了过来，在获取值的时候需要点一下value来获取的是input表单的内容
通过ref中的箭头函数，绑定了值，在方法中直接获取即可，穿过来时，由于react的编译不需要写target但是，还是需要点出value
通过createRef来创建两个容器，通过对象的形势与ref绑定，直接就可以在方法中得到值，不过这里要注意，打印还是获取的时候在点value之前点一个current,如this.realname.current.value
<!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>Document</title> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class Person extends React.Component { //createRef 创建ref容器 realname = React.createRef() age = React.createRef() ShowInfo=()=>{ //字符串 // const {realname,age}=this.refs // console.log(`姓名：${realname.value}年龄：${age.value}`); //回调函数 // let realname = this.realname.value // let age = this.age.value // console.log(`姓名：${realname}年龄：${age}`); //类绑定 console.log(this.realname.current.value); console.log(this.age.current.value); } render() { return ( /*字符串形势 <div> <p><input type="text" placeholder="请输入姓名" ref='realname'/></p> <p><input type="text" placeholder="年龄" ref='age'/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> */ //回调函数 // <div> // <p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p> // <p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p> // <p><button onClick={this.ShowInfo}>提交</button></p> // </div> //createRef 创建ref容器 <div> <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p> <p><input type="text" placeholder="年龄" ref={this.age}/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> ); } } ReactDOM.render(<Person/>,document.getElementById('root')) </script> </body> </html>
以上就是React组件实例三大属性state props refs使用详解的详细内容，更多关于React组件state props refs的资料请关注易盾网络其它相关文章！
本文共计1838个文字，预计阅读时间需要8分钟。
目录
一、State 1. 概念 2. State的简单用法 3. JS绑定事件 4. React绑定事件 5. React this指向问题 6. 修改state值 7. 代码简写
二、Props 1. 概念 2. 传递参数的基本方法、运算符传递参数 3. refs的定义 + 字符串形式
目录
- 一、 State
- 1.概念
- 2.State的简单用法
- 3.JS绑定事件
- 4.react 绑定事件
- 5.react this指向问题
- 6.修改state值
- 7.代码简写
- 二、props
- 1.概念
- 2.传参的基础方法、运算符传参
- 三、refs
- 定义
- 字符串形式的ref、回调函数下ref、createRef 创建ref容器
一、 State
1.概念
概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。
2.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>Document</title> <style> .btn{ width: 100px; height: 40px; background-color: red; } .on{ background-color: gray; } </style> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class IsLike extends React.Component { state = { flag:true } //箭头函数this指向上下文，静态不可改变 changeFlag=()=>{ this.setState({flag:!this.state.flag}) } render() { const {flag}=this.state return ( <div> <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button> </div> ) } } ReactDOM.render(<IsLike/>,document.getElementById('root')) </script> </body> </html>
编辑
3.JS绑定事件
let btn = document.getElementById('btn'); btn.addEventListener('click',function(){ alert('按钮被点击了!'); }) btn.onclick = function(){ alert('按钮被点击了!'); } function demo(){ alert('按钮被点击了'); }
4.react 绑定事件
render(){ return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> }
说明：
·onclick 变为 onClick。
·{函数名}返回值给click，加()就会直接调用。
5.react this指向问题
demo(){ console.log(this);//undefined console.log('事件被点击了'); }
举例说明：
class Person{ constructor(name,age) { this.name = name; this.age = age; } say(){ console.log(this); } } const p1 = new Person('张三',18); p1.say();//p1为实例对象 const p2 = p1.say; p2();//undefined 类采取是严格模式
6.修改state值
class MyClass extends React.Component{ constructor(props) { super(props); this.state = {isflag:true}; this.demo = this.demo.bind(this); }render(){ return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> } demo(){ this.setState({isflag:!this.state.isflag}) }} ReactDOM.render(<MyClass/>,document.getElementById('root'));
说明：
bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动
7.代码简写
class MyClass extends React.Component{ state = {isflag:true} render(){ return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a> } demo = () => { this.setState({isflag:!this.state.isflag}) } } ReactDOM.render(<MyClass/>,document.getElementById('root'));
说明：
类中的属性直接赋值，省去构造函数。
自定义方法—用赋值语句的形式+箭头函数
二、props
每个组件对象都会有props(properties的简写)属性。
组件标签的所有属性都保存在props中。
props 是不可变的，只能通过 props 来传递数据。
2.传参的基础方法、运算符传参
其中先通过let创建了一个对象，在通过三点运算符，来遍历得到，对象里面的值
在通过对象结构得到props中的realname和age,GetName是Person组件的子组件，在Person中传值给GetName,GetName通过props接收
<!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>Document</title> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class GetName extends React.Component { render() { return ( <div>姓名：{this.props.realname}</div> ); } } class Person extends React.Component { render() { const {realname,age} = this.props return ( <div> <GetName realname={this.props.realname}/> <span>年龄：{age}</span> </div> ); } } let p1 = {realname:'张三',age:19} ReactDOM.render(<Person {...p1}/>,document.getElementById('root')) </script> </body> </html>
三、refs
定义
组件内的标签可以定义ref来标识自己。
字符串形式的ref、回调函数下ref、createRef 创建ref容器
字符串形势，是直接通过ref绑定值，通过在点击事件中获取ref的值，ref如同把整个input表单传了过来，在获取值的时候需要点一下value来获取的是input表单的内容
通过ref中的箭头函数，绑定了值，在方法中直接获取即可，穿过来时，由于react的编译不需要写target但是，还是需要点出value
通过createRef来创建两个容器，通过对象的形势与ref绑定，直接就可以在方法中得到值，不过这里要注意，打印还是获取的时候在点value之前点一个current,如this.realname.current.value
<!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>Document</title> </head> <body> <div id="root"></div> <!-- 引入react核心库 --> <script src="js/react.development.js"></script> <!-- 引入操作dom的扩展库 --> <script src="js/react-dom.development.js"></script> <!-- 引入babel来解析jsx语法 --> <script src="js/babel.min.js"></script> <script type="text/babel"> class Person extends React.Component { //createRef 创建ref容器 realname = React.createRef() age = React.createRef() ShowInfo=()=>{ //字符串 // const {realname,age}=this.refs // console.log(`姓名：${realname.value}年龄：${age.value}`); //回调函数 // let realname = this.realname.value // let age = this.age.value // console.log(`姓名：${realname}年龄：${age}`); //类绑定 console.log(this.realname.current.value); console.log(this.age.current.value); } render() { return ( /*字符串形势 <div> <p><input type="text" placeholder="请输入姓名" ref='realname'/></p> <p><input type="text" placeholder="年龄" ref='age'/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> */ //回调函数 // <div> // <p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p> // <p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p> // <p><button onClick={this.ShowInfo}>提交</button></p> // </div> //createRef 创建ref容器 <div> <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p> <p><input type="text" placeholder="年龄" ref={this.age}/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> ); } } ReactDOM.render(<Person/>,document.getElementById('root')) </script> </body> </html>
以上就是React组件实例三大属性state props refs使用详解的详细内容，更多关于React组件state props refs的资料请关注易盾网络其它相关文章！