React - ref的使用

最新推荐文章于 2024-06-19 14:45:15 发布

非著名奶茶爱好者

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量66

点赞数 2

分类专栏： React 文章标签：字符串 vue javascript

本文链接：https://blog.csdn.net/weixin_46398446/article/details/116861609

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.字符串形式的ref

用的很少，以后可能会停用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!--引入babel，用于将jsx转为js-->
    <script src="../js/babel.min.js"></script>
    <!--引入prop-types,用于对组件标签属性进行限制-->
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            // 展示左侧输入框的数据
            showDate = () => {
                // this.refs中拿到input1
                const {input1} = this.refs
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showDate2 = () => {
                const {input2} = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input type="text" ref="input1" placeholder="点击按钮提示数据"/> &nbsp;
                        <button onClick={this.showDate}>点我提示左侧的数据</button> &nbsp;
                        <input onBlur={this.showDate2} ref="input2" type="text" ref="input2" placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

2.回调函数形式的ref

class Demo extends React.Component {
        // 展示左侧输入框的数据
        showDate = () => {
            // this.refs中拿到input1
            const {input1} = this
            alert(input1.value)
        }
        // 展示右侧输入框的数据
        showDate2 = () => {
            const {input2} = this
            alert(input2.value)
        }
        render() {
            return (
                // 回调函数，这个this指的是Demo对象的this，input1是取的名
                <div>
                    <input type="text" ref={c => this.input1 = c} placeholder="点击按钮提示数据"/> &nbsp;
                    <button onClick={this.showDate}>点我提示左侧的数据</button> &nbsp;
                    <input onBlur={this.showDate2} ref={c => this.input2 = c} type="text" placeholder="失去焦点提示数据"/>
                </div>
            )
        }
    }

在这里插入图片描述

非著名奶茶爱好者

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React - ref的使用

1.字符串形式的ref用的很少，以后可能会停用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ref</title></head><body>  <div id="test"></div> <!--引入r
复制链接

扫一扫