devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React —— React中组件的三大属性（state,props,ref)_react state ref

作者：盐析白兔 | 2024-02-06 15:57:28

赞

踩

react state ref

文章目录

  • 前言
  • 一、 State(状态)
    • 1.1  State的书写形式
    • 1.2  绑定事件方法
    • 1.3  修改state值
    • 1.4 小案例
  • 二、props
    • 2.1 基础用法
    • 2.2 批量传递参数
  • 三、ref的使用
    • 3.1 字符串形式的ref
    • 3.2 回调函数下ref
    • 3.3 createRef 创建ref容器
  • 总结

前言

前面我们已经介绍了React中组件的相关知识，这里就以类式组件为例，讲解组件中的三大属性。

一、 State(状态)

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

1.1  State的书写形式

State 的使用对象形式(key,value)；

例如：
 

  1. state ={
  2.  
  3. a: 10
  4.  
  5. }

1.2  绑定事件方法

 

 <a href='javascript:;' onClick={demo} >已关注</a>

说明：

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

1.3  修改state值

必须要使用  setState 方法修改state中的值

  1. demo( ){
  2.  
  3.     this.setState({isflag:!this.state.isflag})
  4.  
  5. }
  6.  
  7.  }
  8.  
  9.  ReactDOM.render(<MyClass/>,document.getElementById('hello'));

说明：

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

1.4 小案例

打铁需趁热，下面通过一个小案例和大家讲述state的具体用法以及上述小知识点的应用吧！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>setState的用法</title>
  9.     <style>
  10.         button{
  11.             width: 80px;
  12.             height: 40px;
  13.             border-radius: 10px;
  14.             border: none;
  15.             border: 1px solid #333;
  16.             font-size: 16px;
  17.         }
  18.         span{
  19.             color: red;
  20.             font-size:  24px;
  21.             font-style:italic;
  22.             margin-left: 10px;
  23.         }
  24.         .yes{
  25.             background: red;
  26.         }
  27.         .no{
  28.             background: green;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div id="root"></div>
  35.  
  36.     <script src="../JS/react.development.js"></script>
  37.     <script src="../JS//react-dom.development.js"></script>
  38.     <script src="../JS/babel.min.js"></script>
  39.  
  40.     <script type="text/babel">
  41.         // 利用类式组件
  42.         class Person extends React.Component {
  43.             // 类式组件中用来存储数据的地方，类似vue中的data,
  44.             // 因为数据可以多种，所以采用对象的形式，
  45.             // 又因为是在一个类中，所以很多书写习惯类似在定义类
  46.             state ={
  47.                 flag: true,
  48.                 count: 1
  49.             }
  50.             // 因为是类，所以还是按照类中函数的书写形式，但要注意写成箭头函数形式
  51.             clickNumber = ( )=>{
  52.                 // 要改变state中的数据，需要使用setState方法
  53.                 // 但也有可能改变的数据较多，所以可以采用对象的形式，
  54.                 // 这里的修改是合并修改，即有该属性就改变该属性的值，若没有则不改变
  55.                this.setState({flag: !this.state.flag,
  56.             count: ++this.state.count})
  57.             }
  58.             render() {
  59.                 return (
  60.                     <div>
  61.                         <button className={this.state.flag?'yes':'no'} onClick={this.clickNumber}>{this.state.flag ? '已点击':'未点击'}</button>
  62.                         <p>点击次数为:<span>{this.state.count}</span></p>
  63.                     </div>
  64.                 )
  65.             }
  66.         }
  67.         // 转为真实dom到页面
  68.         ReactDOM.render(<Person />, document.getElementById('root'));
  69.     </script>
  70.  
  71. </body>
  72.  
  73. </html>

二、props

2.1 基础用法

  • 每个组件对象都会有props(properties的简写)属性。
  • 组件标签的所有属性都保存在props中。
  • props 是不可变的，只能通过 props 来传递数据。

具体使用方式如下：

  1. <script type="text/babel">
  2.         // 类式组件
  3.         class Person extends React.Component {
  4.             // 提交事件的函数,要写成箭头函数
  5.            submit=(event)=>{
  6.             // 去除默认事件
  7.             event.preventDefault();
  8.         
  9.             console.log(123);
  10.            }
  11.             render() {
  12.                 // 获取props的值
  13.                 const {realname,age} = this.props;
  14.                 return (
  15.                     <div>
  16.                       <form action="" >
  17.                    姓名: <input type="text" value={realname}/>
  18.                    <br/>
  19.                    <br/>
  20.                    年龄: <input type="text" value={age}/>
  21.                    <br/>
  22.                    <br/>
  23.                    <button onClick={this.submit}>提交信息</button>
  24.                         </form>
  25.                     </div>
  26.                 )
  27.             }
  28.         }
  29.         // 渲染真实dom到页面上
  30.         ReactDOM.render(<Person realname="Taylor Swift" age={30}/>, document.getElementById('root'));
  31.     </script>

2.2 批量传递参数

  1. let p1 = {name:'张三',age:29};
  2.  
  3. ReactDOM.render(<Person {...p1}/>,document.getElementById('hello'));

三、ref的使用

定义：组件内的标签可以定义ref来标识自己。

3.1 字符串形式的ref 

  1.     <script type="text/babel">
  2.         // 类式组件
  3.         class Person extends React.Component {
  4.             realname = React.createRef();
  5.             age = React.createRef();
  6.             submit = (event) => {
  7.                 // 去除默认事件
  8.                 event.preventDefault();
  9.  
  10.                 // 字符串形式的ref的获取方式——这里的refs没有$，要和vue区别开来
  11.                 console.log(this.refs.realname.value,this.refs.age.value);
  12.              
  13.             }
  14.             render() {
  15.                 return (
  16.                     <div>
  17.                         <form action="">
  18.                            
  19.                             姓名：<input type="text" ref="realname"/>
  20.                             年龄：<input type="text" ref="age" />
  21.                             <br />
  22.                             <br />
  23.                             <input type="button" value="提交信息" onClick={this.submit} />
  24.                         </form>
  25.                     </div>
  26.                 )
  27.             }
  28.         }
  29.         // 渲染真实dom到页面中
  30.         ReactDOM.render(<Person />, document.getElementById('root'));
  31.     </script>

3.2 回调函数下ref

  1.  <script type="text/babel">
  2.         // 类式组件
  3.         class Person extends React.Component {
  4.             realname = React.createRef();
  5.             age = React.createRef();
  6.             submit = (event) => {
  7.                 // 去除默认事件
  8.                 event.preventDefault();
  9.  
  10.                 // 字符串形式的ref的获取方式——这里的refs没有$，要和vue区别开来
  11.                 // console.log(this.refs.realname.value);
  12.                 // 或函数形式的ref的获取方式
  13.                 console.log(this.realname.value);
  14.                 // 获取createRef形式的ref
  15.                 // console.log(this.realname.current.value);
  16.             }
  17.             render() {
  18.                 return (
  19.                     <div>
  20.                         <form action="">
  21.                             {
  22.                                 /*
  23.                                 姓名：<input type="text" ref="realname"/>
  24.                                 年龄：<input type="text" ref="age" />
  25.                                 姓名：<input type="text" ref={(event) => { this.realname = event }} />
  26.                                 年龄：<input type="text" ref={(event) => { this.age = event }} />
  27.                                  姓名：<input type="text" ref={this.realname} />
  28.                             <br />
  29.                             <br />
  30.                             年龄：<input type="text" ref={this.age}   />
  31.                                 */
  32.                             }
  33.                             姓名：<input type="text" ref={(event) => { this.realname = event }} />
  34.                                 年龄：<input type="text" ref={(event) => { this.age = event }} />
  35.                             <br />
  36.                             <br />
  37.                             <input type="button" value="提交信息" onClick={this.submit} />
  38.                         </form>
  39.                     </div>
  40.                 )
  41.             }
  42.         }
  43.         // 渲染真实dom到页面中
  44.         ReactDOM.render(<Person />, document.getElementById('root'));
  45.     </script>

3.3 createRef 创建ref容器

  1.  <script type="text/babel">
  2.         // 类式组件
  3.         class Person extends React.Component {
  4.             realname = React.createRef();
  5.             age = React.createRef();
  6.             submit = (event) => {
  7.                 // 去除默认事件
  8.                 event.preventDefault();
  9.  
  10.                 // 字符串形式的ref的获取方式——这里的refs没有$，要和vue区别开来
  11.                 // console.log(this.refs.realname.value);
  12.                 // 或函数形式的ref的获取方式
  13.                 // console.log(this.realname.value);
  14.                 // 获取createRef形式的ref
  15.                 console.log(this.realname.current.value);
  16.             }
  17.             render() {
  18.                 return (
  19.                     <div>
  20.                         <form action="">
  21.                             {
  22.                                 /*
  23.                                 姓名：<input type="text" ref="realname"/>
  24.                                 年龄：<input type="text" ref="age" />
  25.                                 姓名：<input type="text" ref={(event) => { this.realname = event }} />
  26.                                 年龄：<input type="text" ref={(event) => { this.age = event }} />
  27.                                  姓名：<input type="text" ref={this.realname} />
  28.                             <br />
  29.                             <br />
  30.                             年龄：<input type="text" ref={this.age}   />
  31.                                 */
  32.                             }
  33.                             姓名：<input type="text" ref={this.realname} />
  34.                             <br />
  35.                             <br />
  36.                             年龄：<input type="text" ref={this.age}   />
  37.                             <br />
  38.                             <br />
  39.                             <input type="button" value="提交信息" onClick={this.submit} />
  40.                         </form>
  41.                     </div>
  42.                 )
  43.             }
  44.         }
  45.         // 渲染真实dom到页面中
  46.         ReactDOM.render(<Person />, document.getElementById('root'));
  47.     </script>

总结

以上就是今日的分享，有vue基础的同学在学react会发现有很多相同之处但react和vue的语法习惯还说不尽相同，所以对于和我一样的初学者还说要多写多练多思考，千万不要眼高手低哦！

最后依旧诚挚祝福屏幕前的你健康快乐，平安幸福！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/63377
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号