react中ref的三种获值方式

qq_45833524

已于 2022-11-18 14:46:48 修改

阅读量1k

点赞数

文章标签： react.js javascript 前端

于 2022-11-18 14:40:06 首次发布

本文链接：https://blog.csdn.net/qq_45833524/article/details/127922120

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../study/react.development.js" ></script>
    <script src="../study/react-dom.development.js"></script>
    <script src="../study/babel.min.js"></script>
    <!-- 加载我们的 React 组件。-->
    <!-- <script src="like_button.js"></script> -->
    <style>
        .style{
            color: blue;
        }
    </style>
    <script type="text/babel">
    //   类式组件props
    class Weather extends React.Component{
        constructor(props){
            super(props)
        }
        state={
               
            }
        // ref 取值方式1 直接通过ref赋值再取值
         demo = ()=>{
            let {input1} = this.refs
            console.log(input1)
        }
        render() {

            return(
                <div>
                    <input type="text" ref='input1' onBlur={this.demo} placeholder='请输入'/>
                </div>
            )
        }

        //  ref 方式2 通过回调取值 回调里的值存放在实例上
         demo = ()=>{
            let {input1} = this
            console.log(this)
        }
        render() {

            return(
                <div>
                // 箭头函数自身无this 会向外找this 此时this指向render render实例是Weather 起了个参数名叫input1 
                    <input type="text" ref={input1=>this.input1 = input1} onBlur={this.demo} placeholder='请输入'/>
                </div>
            )
        }


		//将回调写自定义函数里
		demo = (input1)=>{
            console.log(input1)
        }
        render() {
            return(
                <div>
                    <input type="text" ref={this.demo}  placeholder='请输入'/>
                </div>
            )
        }
    }


    ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>
    <div id="test"></div>
</body>
</html>