react ref的三种写法

最新推荐文章于 2024-08-03 16:44:35 发布

万事胜意sy

最新推荐文章于 2024-08-03 16:44:35 发布

阅读量540

点赞数 1

分类专栏：笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_50736511/article/details/120184840

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

有两个输入框第一个点击按钮会弹出输入框里面的内容第二个失去焦点会显示里面的内容

第一种（最早的写法，以后可能会去掉）

<!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="text1"></div>

</body>

</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
    class Jump extends React.Component {
        btnshow=()=>{
          alert(this.refs.input1.value)
        }
        loseshow=()=>{
            alert(this.refs.input2.value)
        }
        render() {
            return (
                <div>
                    <input type="text" ref="input1" />&nbsp;&nbsp;
                    <button  onClick={this.btnshow}>点击弹出此框的信息</button>
                    <br /><br />
                    <input type="text" onBlur={this.loseshow}  ref="input2" />
                </div>
            )
        }

    }
    ReactDOM.render(<Jump />, document.getElementById('text1'))

</script>

在这里插入图片描述
第二种式继于第一种发转出来的

<!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="text1"></div>

</body>

</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
    class Jump extends React.Component {
        btnshow=()=>{
          alert(this.input1.value)
        }
        loseshow=()=>{
            alert(this.input2.value)
        }
        render() {
            return (
                <div>
                    <input type="text" ref={c=>this.input1=c} />&nbsp;&nbsp;
                    <button  onClick={this.btnshow}>点击弹出此框的信息</button>
                    <br /><br />
                    <input type="text" onBlur={this.loseshow}  ref={c=>this.input2=c} />
                </div>
            )
        }

    }
    ReactDOM.render(<Jump />, document.getElementById('text1'))

</script>

在这里插入图片描述
第二种也可以这么写两种写法差距不大

<!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="text1"></div>

</body>

</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
    class Jump extends React.Component {
        saveinput1=(c)=>{
          this.input1=c
           
        }
        saveinput2=(c)=>{
            this.input2=c
        }
        btnshow=()=>{
          alert(this.input1.value)
        }
        loseshow=()=>{
            alert(this.input2.value)
        }
     
        render() {
            return (
                <div>
                    <input type="text" ref={this.saveinput1} />&nbsp;&nbsp;
                    <button  onClick={this.btnshow}>点击弹出此框的信息</button>
                    <br /><br />
                    <input type="text" onBlur={this.loseshow}  ref={this.saveinput2} />
                </div>
            )
        }

    }
    ReactDOM.render(<Jump />, document.getElementById('text1'))

</script>

在这里插入图片描述
第三种最新的方法

<!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="text1"></div>

</body>

</html>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
    class Jump extends React.Component {
        input1=React.createRef()
        input2=React.createRef()
         
        btnshow=()=>{
          alert(this.input1.current.value)
        }
        loseshow=()=>{
            alert(this.input2.current.value)
        }
     
        render() {
            return (
                <div>
                    <input type="text" ref={this.input1} />&nbsp;&nbsp;
                    <button  onClick={this.btnshow}>点击弹出此框的信息</button>
                    <br /><br />
                    <input type="text" onBlur={this.loseshow}  ref={this.input2} />
                </div>
            )
        }

    }
    ReactDOM.render(<Jump />, document.getElementById('text1'))

</script>