REACT--ref的三种用法 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 9 
10     <!-- 该文件向外暴露了一个对象 React-Dom -->
11     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
12     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
13     <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
14 
15 </head>
16 
17 <body>
18 
19     <div id="app"></div>
20     <script type="text/babel">
21         class Study extends React.Component{
22           constructor(props){
23                 super(props)
24                 this.input3 = React.createRef()
25                 {/*通过React.createRef()创建,一个createRef对象只能绑定一个ref，意思就说每绑定一个必须重新创建一个createRef对象*/}
26             }
27           render(){
28             return(
29                <div>
30                       {/*通过字符串创建ref，官方并不建议使用这种方法因为会存在一些问题，后面可能会被移除*/}
31                    { <input type="text" ref="input1"  placeholder="字符串ref用法"/>}
32                     {/*通过回调函数创建ref，*/}
33                     <input type="text" ref={(c)=>{this.input2 = c;console.log(c)}}  placeholder="回调函数ref的用法"/>
34                     <input type="text" ref={this.input3} placeholder="createRef的用法"/>   
35                 </div>
36             )
37           }
38 
39         }
40 
41         ReactDOM.render(<Study />,document.getElementById("app"))
42     </script>
43 </body>
44 
45 </html>

 

posted @ 2021-01-15 15:21  不秃头的代码狗  阅读(219)  评论(0)    收藏  举报