React组件核心属性之refs-白红宇的个人博客

React组件核心属性之refs

发布日期：2021-05-07 01:01:56 浏览次数：26 分类：原创文章

本文共 4967 字，大约阅读时间需要 16 分钟。

组件内的标签可以通过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打印出来，内容如下：

上一篇：[BZOJ4878]挑战NP-Hard

下一篇：[CF468D]Tree

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章