lovecoding
/
VIP26


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>
<body>
    <div id="root">

    </div>
    <script type="text/babel">
        class Demo extends React.Component {
            // 引入createRef 只有一个属性 current 绑定的标签值传给current
            newRef = React.createRef(); 
            showData=()=> {
                // id获取 
                // var input1 = document.getElementById("input1");
                // alert(input1.value);
                // 挂载ref
                // 标签写法：ref='xxx'
                // console.log(this.refs.input1.value,'1')
                // let input1 = this.refs.input1;
                // alert(input1.value)
                // 回调函数
                // 标签写法：ref={{(val)=>{this.xxx=val}}}
                // console.log(this.input1.value)
                // createRef
                // 1.引入 xxx=React.createRef()
                // 2.标签挂载 ref={this.xxx}
                // 3.调用console.log(this.newRef.current.value)
            }
            showMsg=()=> {
                // var input2 = document.getElementById("input2");
                // alert(input2.value);
                // let input2 = this.refs.input2;
                // alert(input2.value)
                // console.log(this.main1.value)
            }
            render() {
                return(
                    <div>
                        <h3>这是一个挂载案例</h3>
                        <input ref={this.newRef} type="text" placeholder='请输入一' />
                        <br/>
                        <button onClick={this.showData}>获取输入框中的值</button> 
                        <br/>
                        <input ref={(content)=>{this.main1=content,console.log(content)}} placeholder='请输入二'  onBlur={this.showMsg} type="text" />   
                    </div>
                )   
            }
        }
        let element = <Demo/>
        ReactDOM.createRoot(document.getElementById("root")).render(element);

    </script>
</body>
</html>