• 六、【React基础】组件实例三大核心属性之三 refs + 事件处理

    文章目录


    理解：

    • 组件内的标签可以定义ref属性来标识自己

    编码：

    1. 字符串形式的ref：
    2. 回调形式的ref：{this.input1 = c}}/>
    3. createRef创建ref容器：myRef= React.createRef();

    1、字符串形式的ref（过时/不推荐）

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>字符串形式的reftitle>
head>

<body>
    
    <div id="test">div>

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

    <script type="text/babel">
        //创建组件
        class Demo extends React.Component {
            //展示左侧输入框的数据
            showData = () => {
                const { input1 } = this.refs
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = () => {
                const { input2 } = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                    	<!-- 字符串形式的ref -->
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    2、回调形式的ref（推荐！！！）

    {this.input1 = c}}/>

    //创建组件
class Demo extends React.Component {
    render() {
        return (
            <div>
                <input 
                    ref={c => this.input1 = c} 
                    type="text" 
                    placeholder="点击按钮提示数据"
                />&nbsp;
                <button onClick={()=>alert(this.input1.value)}>点我提示左侧的数据</button>&nbsp;
                <input 
                    ref={c => this.input2 = c} 
                    onBlur={()=>alert(this.input2.value)} 
                    type="text" 
                    placeholder="失去焦点提示数据" 
                />&nbsp;
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    ● 回调ref中回调次数的问题

    如果 ref 回调函数是以内联函数（ ref={c => this.input1 = c} ）的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

    CODE：

    class Demo extends React.Component{

    state = {isHot:false}

    showInfo = ()=>{
        const {input1} = this
        alert(input1.value)
    }

    changeWeather = ()=>{
        //获取原来的状态
        const {isHot} = this.state
        //更新状态
        this.setState({isHot:!isHot})
    }

    saveInput = (c)=>{
        this.input1 = c;
        console.log('@',c);
    }

    render(){
        const {isHot} = this.state
        return(
            <div>
                <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
                <input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>
                {/* class 的绑定函数的方式避免二次回调 */}
                {/*

    */    }
                <button onClick={this.showInfo}>点我提示输入的数据</button>
                <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    Result：
    在这里插入图片描述

    3、createRef创建ref容器（最新最推荐）

    React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

    myRef= React.createRef();

    class Demo extends React.Component {
    /* React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */
    myRef = React.createRef()
    myRef2 = React.createRef()
    
    render() {
        return (
            <div>
            	<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
                <button 
                	onClick={()=>alert(this.myRef.current.value);}>
                    点我提示左侧的数据
                </button>&nbsp;
            	<input 
                    onBlur={()=>alert(this.myRef2.current.value)} 
                    ref={this.myRef2} 
                    type="text" 
                    placeholder="失去焦点提示数据" />&nbsp;
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    4、事件处理

    1. 通过onXxx属性指定事件处理函数(注意大小写)

      1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性

      2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效

    2. 通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

    小白学习参考视频：尚硅谷React教程

    中文官网：Refs and the DOM

  • 相关阅读:
    Java学习笔记2—集合框架—2.1概述特点
    科研工具分享-SCI写作课
    c语言中数组的介绍(以及三子棋扫雷游戏程序逻辑的介绍！血书25000字！！！！！)
    数的范围---二分法
    2022产业区块链数智经济发展论坛圆满举行
    MySQL数据库备份全攻略：从基础到高级，一文掌握所有备份技巧
    Hystrix熔断器整合 - 服务熔断和服务降级
    【Python开发】Flask开发实战：个人博客（三）
    linux下的io_uring和windows下的overlapped均可实现异步I/O，有什么异同？
    【python】【logging】python如何使用logging模块，一个完美的logging模块
  • 原文地址：https://blog.csdn.net/qq_30769437/article/details/128033504