React05——组件实例三大属性之refs

最新推荐文章于 2024-07-18 11:16:25 发布

I have a lemon

最新推荐文章于 2024-07-18 11:16:25 发布

阅读量130

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/m0_37483148/article/details/114919380

版权

前端专栏收录该内容

89 篇文章 2 订阅

订阅专栏

字符串形式的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">
    <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 type="text/babel">
        class Demo extends React.Component{
            showData=()=>{
                const {input1}=this.refs
                alert(input1.value)
            }
            showData2=()=>{
                const {input2}=this.refs
                alert(input2.value)
            }
           render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/><br/>
                        <button onClick={this.showData}>点击我提示左侧的数据</button>
                        <input ref="input2"onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/><br/>
                    </div>
                )
           }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

回调形式的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">
    <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 type="text/babel">
        class Demo extends React.Component{
            showData=()=>{
                // const {input1}=this.refs
                const{input1}=this
                alert(input1.value)
            }
            showData2=()=>{
                // const {input2}=this.refs
                const{input2}=this//回调函数直接写this
                alert(input2.value)
            }
           render(){
                return(
                    <div>
                        <input ref={c=>this.input1=c} type="text" placeholder="点击按钮提示数据"/><br/>
                        <button onClick={this.showData}>点击我提示左侧的数据</button>
                        <input ref={c=>this.input2=c}onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/><br/>
                    </div>
                )
           }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

createRef创建ref容器·

myRef = React.createRef()

<input ref={this.myRef}/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 type="text/babel">
    class Demo extends React.Component{

        myRef=React.createRef()

        showInfo=()=>{
            console.log(this.myRef);
            alert(this.myRef.current.value)
        }
        render(){
            return (
                <div>
					<input ref={this.myRef} type="text"/><br/><br/>
                    <button onClick={this.showInfo}>点击我提示输入数据</button>
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>