React组件核心属性之refs

最新推荐文章于 2025-03-18 10:41:56 发布

duansamve

最新推荐文章于 2025-03-18 10:41:56 发布

阅读量218

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/116393708

版权

React 专栏收录该内容

72 篇文章

订阅专栏

组件内的标签可以通过ref属性来标识自己。

它有以下几种使用方式：

1、字符串形式的ref：

<input ref="input1"/>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Demo extends React.Component{
            handleClick = () => {
                console.log(this);
                alert(this.refs.myInput.value);
            }

            render(){
                return (<div>
                    <input ref="myInput"/>
                    <button onClick={this.handleClick}>点击获取</button>
                </div>)
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById("app"))
    </script>
</body>
</html>

2、回调形式的ref：

<input ref={c => this.input1 = c} />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Demo extends React.Component{
            handleClick = () => {
                // console.log("this");

                alert(this.myInput1.value);
            }

            render(){
                return (<div>
                    <input ref={c => this.myInput1 = c}/>
                    <button onClick={this.handleClick}>点击获取</button>
                    <input ref="myInput2"/>
                </div>)
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById("app"))
    </script>
</body>
</html>

回调ref中调用次数的问题：

<script type="text/babel">
       class Demo extends React.Component{
            state = {
                isHot: false
            }
 
            changeWeather = () => {
                this.setState({
                    isHot: !this.state.isHot,
                    ok: this.state.ok+1
                })
            }
 
            render(){
                const {isHot} = this.state;
                return (<div>
                    <input ref={c => {this.myInput1 = c; console.log(c)}}/>
                    <h2>今天天气很<span>{isHot? "热" : "冷"}</span></h2>
                    <button onClick={this.changeWeather}>点我切换天气</button>
                </div>)
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById("app"))
    </script>

当你点击button时，控制台总是先打印出null，然后才打印出input。

但是，你把它定义成class绑定函数的形式可以避免上述问题：

        class Demo extends React.Component{
            state = {
                isHot: false
            }

            handleClick = c => {
                this.input1 = c;
                console.log(c);
            }
 
            changeWeather = () => {
                this.setState({
                    isHot: !this.state.isHot
                })
            }
 
            render(){
                const {isHot} = this.state;
                return (<div>
                    <input ref={this.handleClick}/>
                    <h2>今天天气很<span>{isHot? "热" : "冷"}</span></h2>
                    <button onClick={this.changeWeather}>点我切换天气</button>
                </div>)
            }
        }

实际开发中，出现第一种情况问题不大，所以实际开发中，第一种方式用的较多。

3、createRef创建ref容器：

myRef = React.createRef()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Demo extends React.Component{
            myRef = React.createRef();

            handleClick = () => {
                console.log(this);
                console.log(this.myRef.current.value);
            }

            render(){
                return (<div>
                    <input ref={this.myRef}/>
                    <button onClick={this.handleClick}>点击获取</button>
                    <input ref="myInput2"/>
                </div>)
            }
        }

        ReactDOM.render(<Demo/>, document.getElementById("app"))
    </script>
</body>
</html>

以上实例中，你在handleClick中将this打印出来，内容如下：