React - 组件实例三大属性（ref 的使用）_procomponents 组件添加ref-优快云博客

本文链接：https://blog.youkuaiyun.com/Jie_1997/article/details/122998016

本文详细介绍了React组件中引用（ref）的三种常见用法：字符串形式的ref、回调函数形式的ref以及createRef创建的ref。通过实例展示了如何在组件内部获取DOM元素或自定义组件实例，以便进行直接操作。强调了在实际开发中应适度使用ref，以保持代码的简洁性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>