React - 组件实例三大属性（ref 的使用）

风轻轻~

已于 2022-07-22 20:27:20 修改

阅读量408

点赞数

分类专栏： # React__基础文章标签： react.js

于 2022-02-18 14:27:33 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/122998016

版权

React__基础专栏收录该内容

38 篇文章 1 订阅

订阅专栏

React组件实例三大属性（ref 的使用）

1. 字符串形式的ref
2. 回调函数形式的ref
3. createRef 创建 ref

组件可以通过添加ref属性来表示自己
不要过度使用ref

1. 字符串形式的ref

<!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="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 Dome extends React.Component {
            showData1 = () => {
                alert(this.refs.input1.value)
            }
            showData2 = () => {
                alert(this.refs.input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placehold="点击按钮提示数据" />
                        <button onClick={this.showData1}>点击提示数据</button>
                        <hr />
                        <input ref="input2" onBlur={this.showData2} type="text" placehold="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Dome />, document.getElementById("root"))
    </script>
</body>

</html>

2. 回调函数形式的ref

<!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="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 Dome extends React.Component {
            showData1 = () => {
                alert(this.input1.value)
            }
            showData2 = () => {
                alert(this.input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref={(currentNode) => { this.input1 = currentNode }} type="text" placehold="点击按钮提示数据" />
                        <button onClick={this.showData1}>点击提示数据</button>
                        <hr />
                        <input ref={(currentNode) => { this.input2 = currentNode }} onBlur={this.showData2} type="text" placehold="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Dome />, document.getElementById("root"))
    </script>
</body>

</html>

3. createRef 创建 ref

<!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="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 Dome extends React.Component {
            myRef1 = React.createRef()
            showData1 = () => {
                alert(this.myRef1.current.value)
            }
            myRef2 = React.createRef()
            showData2 = () => {
                alert(this.myRef2.current.value)
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef1} type="text" placehold="点击按钮提示数据" />
                        <button onClick={this.showData1}>点击提示数据</button>
                        <hr />
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" placehold="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Dome />, document.getElementById("root"))
    </script>
</body>

</html>