1.refs屬性
1). 組件內的標籤都可以定義ref屬性來標識自己 類似id
例如則 this.refs.username 返回input對象
2). 在組件中可以通過this.refs.refName來得到對應的真實DOM對象
3). 作用: 用於操作指定的ref屬性的dom元素對象(表單標籤居多)
2. 事件處理
1). 通過onXxx屬性指定組件的事件處理函數(注意大小寫)
React使用的是自定義(合成)事件, 而不是使用的DOM事件
React中的事件是通過委託方式處理的(委託給組件最外層的元素)
2). 通過event.target得到發生事件的DOM元素對象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input對象}
3. 強烈注意
1). 組件內置的方法中的this爲組件對象
2). 在組件中自定義的方法中的this爲null
強制綁定this
箭頭函數(ES6模塊化編碼時才能使用)
4. 問題: 如何給一個函數強制指定內部的this?
例題
需求: 自定義組件, 功能說明如下:
1. 界面如果頁面所示
2. 點擊按鈕, 提示第一個輸入框中的值
3. 當第2個輸入框失去焦點時, 提示這個輸入框中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component_refs</title>
</head>
<body>
<div id="example"></div>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
class MyComponent extends React.component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);//強制綁定this
}
render(){
return(
<div>
<input type="text" ref="msg"/>
<button onClick={this.handleClick}>提示輸入數據</button>//或者onClick={this.handleClick.bind(this)}
<input type="text" placeholder="失去焦點提示數據"/>
</div>
CC
}
}
handleClick(event){
var input = this.refs.msg;
alert(input.value);
}
ReactDOM.render(<MyComponent/>,document.getElementById("example") )
</script>
</body>
</html>