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

纯纯的小白

已于 2022-11-25 10:58:29 修改

阅读量471

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-11-25 10:56:56 首次发布

本文链接：https://blog.csdn.net/qq_30769437/article/details/128033504

版权

React 专栏收录该内容

56 篇文章 2 订阅

订阅专栏

文章目录

1、字符串形式的ref（过时/不推荐）
2、回调形式的ref（推荐！！！）
- ● 回调ref中回调次数的问题
3、createRef创建ref容器（最新最推荐）
4、事件处理

理解：

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

编码：

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

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

<input ref="input1"/>

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <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>

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

<input ref={(c)=>{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'))

● 回调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 的绑定函数的方式避免二次回调 */}
                {/*<input ref={this.saveInput} type="text"/><br/><br/>*/}
                <button onClick={this.showInfo}>点我提示输入的数据</button>
                <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

Result：
在这里插入图片描述

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

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

myRef= React.createRef();

<input ref={this.myRef}/>

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

4、事件处理

通过onXxx属性指定事件处理函数(注意大小写)
1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

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

中文官网：Refs and the DOM