脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React组件state props refs

React组件实例三大属性state props refs使用详解

 更新时间：2022年09月07日 15:54:55   作者：小余努力搬砖  
这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

一、 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

1.概念

每个组件对象都会有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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React 使用Hooks简化受控组件的状态绑定

    React 使用Hooks简化受控组件的状态绑定

    这篇文章主要介绍了React 使用Hooks简化受控组件的状态绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本篇文章主要介绍了浅谈React + Webpack 构建打包优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript中的useRef 和 useState介绍

    JavaScript中的useRef 和 useState介绍

    这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍，下列文章，我们将学习 useRef 和 useState hook是什么，它们的区别以及何时使用哪个。 这篇文章中的代码示例将仅涉及功能组件，但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下
    2021-11-11
  • create-react-app全家桶router mobx全局安装配置

    create-react-app全家桶router mobx全局安装配置

    这篇文章主要为大家介绍了create-react-app全家桶router mobx全局安装配置，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • React不使用requestIdleCallback实现调度原理解析

    React不使用requestIdleCallback实现调度原理解析

    这篇文章主要为大家介绍了React不使用requestIdleCallback实现调度原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详解react native页面间传递数据的几种方式

    详解react native页面间传递数据的几种方式

    这篇文章主要介绍了详解react native页面间传递数据的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 浏览器中视频播放器实现的基本思路与代码

    浏览器中视频播放器实现的基本思路与代码

    这篇文章主要给大家介绍了关于浏览器中视频播放器实现的基本思路与代码,并且详细总结了浏览器中的音视频知识,对大家的理解和学习非常有帮助,需要的朋友可以参考下
    2021-08-08
  • 使用react-beautiful-dnd实现列表间拖拽踩坑

    使用react-beautiful-dnd实现列表间拖拽踩坑

    相比于react-dnd，react-beautiful-dnd更适用于列表之间拖拽的场景，本文主要介绍了使用react-beautiful-dnd实现列表间拖拽踩坑，感兴趣的可以了解一下
    2021-05-05
  • React经典面试题之倒计时组件详解

    React经典面试题之倒计时组件详解

    这些天也都在面试,面试的内容也大多千篇一律,无外乎vue、react这些框架的一些原理,和使用方法,但是也遇到些有趣的题目,这篇文章主要给大家介绍了关于React经典面试题之倒计时组件的相关资料,需要的朋友可以参考下
    2022-03-03
  • ReactQuery 渲染优化示例详解

    ReactQuery 渲染优化示例详解

    这篇文章主要为大家介绍了ReactQuery 渲染优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11

最新评论