• React之组件实例的三大属性之rel

    文章目录

    ref

    组件内的标签可以定义属性来标识定义自己，有三种方式来进行定义。下面通过一个实例分别介绍

    实例

    做两个输入框，左边点击按钮有弹窗，右边输出后点击别处页面会有弹窗。

    字符串形式

    这种形式十分方便，操作起来速度快，但是react不推荐

    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>Documenttitle>
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 Demo extends React.Component {
            showData = () => {
                const {input1} = this.refs
                alert(this.refs.input1.value)
                alert(input1.value + "aaa")
            }

            showData2 = () => {
                const {input2} = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </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

    运行结果：
    左侧输入后点击按钮出弹窗
    在这里插入图片描述
    右侧输入后点击其他处出弹窗
    在这里插入图片描述

    回调函数形式

    这种方法也比较方便，比字符形式好点。

    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>Documenttitle>
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 Demo extends React.Component {
            showData = () => {
                const {input1} = this
                alert(input1.value)
            }

            showData2 = () => {
                const {input2} = this
                alert(input2.value)
            }
            //内联函数的写法和类绑定函数的写法没什么区别的
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </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

    输出结果和上面一样

    createRef

    这种方式好像比较麻烦，但是react推荐这种方法

    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>Documenttitle>
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 Demo extends React.Component {
            // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
            myRef = React.createRef()
            myRef2 = React.createRef()
            showData = () => {
                alert(this.myRef.current.value)
            }

            showData2 = () => {
                alert(this.myRef2.current.value)
            }
            //内联函数的写法和类绑定函数的写法没什么区别的
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </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

    输出结果和上面一样

  • 相关阅读:
    好奇宝宝看 Docker 底层原理（上）
    ChatGPT国内能用吗？中国用户怎么才能使用ChatGPT？
    BigDecimal 类型的计算方法
    docker能干什么以及基本名词解释
    程序环境和预处理
    云原生Kubernetes：Yaml文件编写
    【语言模型生成分子更好】Language models can learn complex molecular distributions
    （附源码）ssm在线学习网站 毕业设计 011451
    使用 Jenkins + Github + dokcer-compose 部署项目-实战篇
    MySQL 视图,触发器,存储过程,索引,树,慢优化查询
  • 原文地址：https://blog.csdn.net/qq_52785473/article/details/126275274