react中React.createRef()的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script type='text/javascript' src="./react.development.js"></script>
<script type='text/javascript' src="./react-dom.development.js"></script>
<script type='text/javascript' src="./babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Demo extends React.Component {
// React.createRef() 調用后返回一個容器,該容器可以存儲被ref標識的節點
myRef = React.createRef()
showData = () =>{
console.log(this.myRef)
}
render(){
return (
<div>
<input ref={this.myRef} placeholder="點擊按鈕提示數據"></input>
<button onClick ={this.showData}>點我</button>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById('root'))
</script>
</body>
</html>
運行效果
