10ref ----React.createRef

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="test">
    <span></span>
</div>
</body>
</html>
<script type="text/babel">
    //不推荐了已经
    class Demo extends React.Component{
        //React.createRef()调用后可以返回一个容器,该容器可以存储ref所标识的节点,该容器是"专人专用"
        MyRef = React.createRef()
        state={
            isHot:true
        }
        showInfo=()=>{
            const {input1} =this
            alert(input1.value)
            this.setState({
                isHot: false
            })
        }
        render() {
            const {isHot} =this.state
            return(
                <div>
                    <input ref={this.MyRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                    <button ref="btn" onClick={this.showInfo}>点我提示左侧的数据</button>&nbsp;
                </div>
            )
        }
    }
    ReactDOM.render(<Demo/>,document.querySelector("#test"))
</script>
posted @ 2022-07-06 10:12 大宁0615 阅读(39) 评论(0) 收藏举报
刷新页面返回顶部