React面向组件编程(三大核心属性之ref)

三大核心属性之ref与事件处理

文章目录

  • 三大核心属性之ref与事件处理
    • 一、字符串形式的ref(可能会被淘汰,不推荐使用)
    • 二、回调形式的ref(常用的内敛回调)
      • 1.回调函数会传入回调本身真实DOM到函数体内
      • 2.回调函数的ref回调函数的调用次数的问题
      • 3. ref的回调函数定义成class的绑定函数的方式
    • 三、creatRef绑定
    • 总结


一、字符串形式的ref(可能会被淘汰,不推荐使用)

React面向组件编程(三大核心属性之ref)_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="test">div>

<script src="js/react.development.js">script>
<script src="js/react-dom.development.js">script>
<script src="js/babel.min.js">script>
<script src="js/prop-types.js">script>
<script type="text/babel">
    class Mycomponent extends React.Component{

        render(){
            return (
                <div>
                    <input ref="input1" type="text" placeholder="点击按钮响应"/>&nbsp;
                    <button  onClick={this.showData}>点我提示左边数据</button>&nbsp;
                    <input  placeholder="离焦响应"/>
                </div>
            )
        }
        showData=()=>
        {
            const {input1}=this.refs;
            console.log(input1.value);

        }
    }
    ReactDOM.render(<Mycomponent/>,document.getElementById("test"));
script>
body>
html>

React面向组件编程(三大核心属性之ref)_第2张图片

二、回调形式的ref(常用的内敛回调)

1.回调函数会传入回调本身真实DOM到函数体内

currentNode=       

React面向组件编程(三大核心属性之ref)_第3张图片

2、在render函数被调用的时候就会默认调用ref,自动执行ref后面的回调函数,将其真实DOM放到this里面,后面在函数点击的时候再调用回来

2.回调函数的ref回调函数的调用次数的问题

    ref调用回调函数是以内敛函数的方式定义的,在更新的过程中,它会被执行两次,第一次是null,第二次是传入
的dom元素。这是因为每次渲染的时候会创建一个新的函数实例,所以react清空旧的ref并且设置新的。通过将
ref的回调函数定义成class的绑定函数的方式可以避免上述问题,但是大多数情况它是没有必要的

React面向组件编程(三大核心属性之ref)_第4张图片

代码如下(示例):

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="test">div>

<script src="js/react.development.js">script>
<script src="js/react-dom.development.js">script>
<script src="js/babel.min.js">script>
<script src="js/prop-types.js">script>
<script type="text/babel">
    class Mycomponent extends React.Component{

        state={isHot:true}
        render(){
            return (
                    <div>
                        <h1 onClick={this.changeWeather}>今天的天气是{this.state.isHot?"炎热":"凉爽"}</h1>
                        <input ref={(currentNode)=>{this.input1=currentNode;console.log(currentNode)}} type="text" placeholder="点击按钮响应"/>&nbsp;
                        <button  onClick={this.showData}>点我提示左边数据</button>&nbsp;
                        <input  placeholder="离焦响应"/>
                    </div>
            )
        }
        changeWeather=()=>{
            this.setState({isHot:!this.state.isHot});
        }
        showData=()=>
        {
            const {input1}=this;
            console.log(input1.value);

        }
    }
    ReactDOM.render(<Mycomponent/>,document.getElementById("test"));
script>
body>
html>

3. ref的回调函数定义成class的绑定函数的方式

React面向组件编程(三大核心属性之ref)_第5张图片

三、creatRef绑定

React面向组件编程(三大核心属性之ref)_第6张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="test">div>

<script src="js/react.development.js">script>
<script src="js/react-dom.development.js">script>
<script src="js/babel.min.js">script>
<script src="js/prop-types.js">script>
<script type="text/babel">
    class Mycomponent extends React.Component{

        myref=React.createRef();
        myref1=React.createRef();
        render(){
            return (
                    <div>
                        <input ref={this.myref} type="text" placeholder="点击按钮响应"/>&nbsp;
                        <button  onClick={this.showData}>点我提示左边数据</button>&nbsp;
                        <input onBlur={this.showData1}ref={this.myref1} type="text" placeholder="离焦响应"/>
                    </div>
            )
        }
        showData=()=>
        {
            console.log(this.myref.current.value);
        }
        showData1=()=>
        {
            console.log(this.myref1.current.value);
        }
    }
    ReactDOM.render(<Mycomponent/>,document.getElementById("test"));
script>
body>
html>

总结

目前最常用的是ref内敛函数绑定,虽然会有调用两次的问题,但是这个无关紧要

你可能感兴趣的:(前端,react.js,javascript,前端)