2****.4.2. 理解
組件內(nèi)的標簽可以定義ref屬性來標識自己
2.4.3. 編碼
- 字符串形式的ref
- 回調(diào)形式的ref
- createRef創(chuàng)建ref容器·
2.4.4. 事件處理
1.通過onXxx屬性指定事件處理函數(shù)(注意大小寫)
1)React使用的是自定義(合成)事件, 而不是使用的原生DOM事件
2)React中的事件是通過事件委托方式處理的(委托給組件最外層的元素)
2.通過event.target得到發(fā)生事件的DOM元素對象
編碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_createRef.html</title>
</head>
<body>
<!-- 準備好一個容器 -->
<div id="test"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babe1,用于將jsx轉(zhuǎn)為js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/* 此處一定要寫babel */
// 創(chuàng)建組件
class Demo extends React.Component{
/**
* React.createRef()調(diào)用后可以返回一個容器，該容器可以存儲被ref所標識的節(jié)點，該容器是專人專用的
*/
myRef=React.createRef();
myRef2 = React.createRef();
showData = ()=>{
alert(this.myRef.current.value);
}
showData2 = ()=>{
alert(this.myRef2.current.value);
}
render(){
return (
<div>
<input ref={this.myRef} type="text" placeholder='點擊按鈕提示數(shù)據(jù)'/>
<button onClick={this.showData}>點我提示左側(cè)數(shù)據(jù)</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder='失去焦點提示數(shù)據(jù)'/>
</div>
)
}
}
// 渲染組件到頁面
ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>
</body>
</html>
