0
0

猿创征文｜【React 三】组件实例的三大属性（state、props、refs）

一、 State

1.概念

概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

2.State的简单用法

实现简单的切换效果，这里的效果是一种覆盖

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .btn{
  10.             width: 100px;
  11.             height: 40px;
  12.             background-color: red;
  13.         }
  14.         .on{
  15.             background-color: gray;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="root"></div>
  22.     <!-- 引入react核心库 -->
  23.     <script src="js/react.development.js"></script>
  24.     <!-- 引入操作dom的扩展库 -->
  25.     <script src="js/react-dom.development.js"></script>
  26.     <!-- 引入babel来解析jsx语法 -->
  27.     <script src="js/babel.min.js"></script>
  29.     <script type="text/babel">
  30.         class IsLike extends React.Component {
  31.             state = { flag:true } 
  32.            
  33.             //箭头函数this指向上下文，静态不可改变
  34.             changeFlag=()=>{
  35.                 this.setState({flag:!this.state.flag})
  36.             }
  37.             render() { 
  38.                 const {flag}=this.state
  39.                 return (
  40.                     <div>
  41.                         <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button>
  42.                     </div>
  43.                     
  44.                 )
  45.             }
  46.         }
  47.         ReactDOM.render(<IsLike/>,document.getElementById('root'))
  49.     </script>
  50. </body>
  51. </html>

3. JS绑定事件

  1. let btn = document.getElementById('btn');
  3. btn.addEventListener('click',function(){
  5.    alert('按钮被点击了!');
  7. })
  8. btn.onclick = function(){
  10.  alert('按钮被点击了!');
  11. }
  13. function demo(){
  15. alert('按钮被点击了');
  17. }

**** 4.react 绑定事件****

  1. render(){
  3. return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
  5. }

说明：

·onclick 变为 onClick。

·{函数名}返回值给click，加()就会直接调用。

5.react this指向问题

  1. demo(){      console.log(this);//undefined
  3. console.log('事件被点击了');
  5. }

举例说明：

  1. class Person{
  2.      constructor(name,age) {
  3.                  this.name = name;
  4.  this.age = age;
  5.      }
  6. say(){
  7.  console.log(this);
  8.  }
  9.  }
  11. const p1 = new Person('张三',18);
  12. p1.say();//p1为实例对象
  13. const p2 = p1.say;
  14. p2();//undefined 类采取是严格模式

6.修改state值

  1. class MyClass extends React.Component{
  3. constructor(props) {   
  4.    super(props);
  5.    this.state = {isflag:true};
  6.    this.demo = this.demo.bind(this);
  7. }render(){
  9. return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
  10. }
  12. demo(){
  14.     this.setState({isflag:!this.state.isflag})
  16. }}
  17.  ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明：

bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动

7.代码简写

  1. class MyClass extends React.Component{
  2. state = {isflag:true}
  3. render(){
  5. return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
  7. }
  8.  demo = () => {
  9.     this.setState({isflag:!this.state.isflag})
  10.  }
  12. }
  14. ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明：

类中的属性直接赋值，省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props

1.概念

每个组件对象都会有props(properties的简写)属性。

组件标签的所有属性都保存在props中。

props 是不可变的，只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象，在通过三点运算符，来遍历得到，对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件，在Person中传值给GetName,GetName通过props接收

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="root"></div>
  12.     <!-- 引入react核心库 -->
  13.     <script src="js/react.development.js"></script>
  14.     <!-- 引入操作dom的扩展库 -->
  15.     <script src="js/react-dom.development.js"></script>
  16.     <!-- 引入babel来解析jsx语法 -->
  17.     <script src="js/babel.min.js"></script>
  19.     <script type="text/babel">
  21.         class GetName extends React.Component {
  22.             
  23.             render() { 
  24.                 return (
  25.                     <div>姓名：{this.props.realname}</div>
  26.                 );
  27.             }
  28.         }
  29.          
  30.         class Person extends React.Component {
  31.             
  32.             render() { 
  33.                 const {realname,age} = this.props
  34.                 return (
  35.                     <div>
  36.                     <GetName realname={this.props.realname}/>
  37.                     <span>年龄：{age}</span>
  38.                     </div>
  39.                 );
  40.             }
  41.         }
  42.         let p1 = {realname:'张三',age:19}
  43.         ReactDOM.render(<Person {...p1}/>,document.getElementById('root'))  
  44.     </script>
  46. </body>
  47. </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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="root"></div>
  12.     <!-- 引入react核心库 -->
  13.     <script src="js/react.development.js"></script>
  14.     <!-- 引入操作dom的扩展库 -->
  15.     <script src="js/react-dom.development.js"></script>
  16.     <!-- 引入babel来解析jsx语法 -->
  17.     <script src="js/babel.min.js"></script>
  19.     <script type="text/babel">
  21.         class Person extends React.Component {
  22.             //createRef 创建ref容器
  23.             realname = React.createRef()
  24.             age      = React.createRef()
  26.             ShowInfo=()=>{
  27.                 //字符串
  28.                 // const {realname,age}=this.refs
  29.                 // console.log(`姓名：${realname.value}年龄：${age.value}`); 
  31.                 //回调函数
  32.                 // let realname = this.realname.value
  33.                 // let age      = this.age.value
  34.                 // console.log(`姓名：${realname}年龄：${age}`);
  36.                 //类绑定
  37.                 console.log(this.realname.current.value);
  38.                 console.log(this.age.current.value);
  39.             }
  40.             render() { 
  41.                 return (
  42.                 /*字符串形势
  43.                     <div>
  44.                         <p><input type="text" placeholder="请输入姓名" ref='realname'/></p>
  45.                         <p><input type="text" placeholder="年龄" ref='age'/></p>
  46.                         <p><button onClick={this.ShowInfo}>提交</button></p>
  47.                     </div>
  48.                 */
  49.                     //回调函数
  50.                     // <div>
  51.                     //    <p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p>
  52.                     //    <p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p>
  53.                     //    <p><button onClick={this.ShowInfo}>提交</button></p>
  54.                     // </div>
  55.                         
  56.                     //createRef 创建ref容器
  57.                     <div>
  58.                        <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p>
  59.                        <p><input type="text" placeholder="年龄" ref={this.age}/></p>
  60.                        <p><button onClick={this.ShowInfo}>提交</button></p>
  61.                     </div>
  63.                 );
  64.             }
  65.         }
  66.         ReactDOM.render(<Person/>,document.getElementById('root')) 
  67.        
  69.     </script>
  70. </body>
  71. </html>
标签： react.js javascript 前端
本文转载自: https://blog.csdn.net/yzq0820/article/details/126714182
版权归原作者 小余努力搬砖 所有， 如有侵权，请联系我们删除。
登录后发布评论

“猿创征文｜【React 三】组件实例的三大属性（state、props、refs）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？