组件实例三大属性之ref的使用

最新推荐文章于 2024-05-26 03:38:41 发布

种草小妖儿.

最新推荐文章于 2024-05-26 03:38:41 发布

阅读量136

点赞数

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

本文链接：https://blog.csdn.net/S2763427717/article/details/131261286

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

字符串形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串形式的ref</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Demo extends React.Component{
            showData = () => {
                console.log(this);
                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><br/>
                        <input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示输入数据"/>
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

回调函数形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数形式的ref</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Demo extends React.Component{
            showData = () => {
                const {input1} = this;
                alert(input1.value)
            }
            showData2 = ()=>{
                const {input2} = this;
                alert(input2.value)
            }

            render(){
                return(
                    <div>
                        <input ref={(currentNode)=> {
                            console.log(this);
                            this.input1 = currentNode;
                        }} type="text" placeholder="点击按钮提示输入数据" /><br/>
                        <button onClick={this.showData}>点我提示上边输入框的数据</button><br/>
                        <input ref={currentNode => this.input2 = currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示输入数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>
</body>
</html>

回调ref中回调执行次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数ref中回调执行次数</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Demo extends React.Component{
            state = {
                isHot:false
            }
            saveInput = (currentNode)=>{
                this.input1 = currentNode;
                console.log("@",this.input1);
            }
            showData = ()=>{
                const {input1} = this;
                alert(input1.value)
            }
            changeWeather = () => {
                const {isHot} = this.state;
                this.setState({isHot:!isHot})
            }
            render(){
                const {isHot} = this.state;
                return(
                    <div>
                        {/*回调执行两次*/}
                        {/*<input ref={(currentNode)=> {
                            this.input1 = currentNode;
                            console.log("@",this.input1);
                        }} type="text" placeholder="点击按钮提示输入数据" />&nbsp;*/}

                        {/*回调执行一次*/}
                        <input ref={this.saveInput} type="text" placeholder="点击按钮提示输入数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左边输入框的数据</button><br/><br/>

                        <h2>今天天气很{isHot?"炎热":"凉爽"}</h2>
                        <button onClick = {this.changeWeather}>点我切换天气哟</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>
</body>
</html>

createRef

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createRef</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Demo extends React.Component{
            // React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的
            myRef1 = React.createRef()
            myRef2 = React.createRef()
            
            showData1 = () => {
                console.log(this.myRef1);
                alert(this.myRef1.current.value)
            }
            showData2 = ()=>{
                alert(this.myRef2.current.value)
            }

            render(){
                return(
                    <div>
                        <input ref={this.myRef1} type="text" placeholder="点击按钮提示输入数据" /><br/>
                        <button onClick={this.showData1}>点我提示上边输入框的数据</button><br/>
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示输入数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById("test"))
    </script>
</body>
</html>