淺談慕課網React入門課程筆記（四）

本文介紹如何監聽、響應React組件上的相關事件。

綁定事件的傳統方法是使用addEventListener。

React的事件綁定預處理的不同在於：React向組件上綁定事件是通過on駝峯式命名的方式來綁定相應的事件的。這與原生JS中通過HTML屬性在HTML標籤上綁定事件是不一樣的，除了寫法不一樣外，還有一個區別是，這裏並不是真實的DOM節點，只是一個React Element。

事件的處理函數一般通過對象屬性封裝在React Components的對象實例上。事件處理函數的參數的參數可以是React封裝的event對象，event對象是在原生的JS的event基礎上封裝的，所以它同時具有了原生event方法，如阻止瀏覽器的默認行爲、阻止冒泡等。事件處理函數往往需要拿到某個標籤的內容，這可以通過ref屬性來實現：通過ref屬性給子組件起名，通過this.refs.子組件名可以索引到該組件，但是注意，索引到的是React Components，而不是真實的DOM節點，要操作真實的DOM節點，修改其樣式，需要用到ReactDOM封裝的findDOMNode()方法，參數是React Components。

var MyClick = React.createClass({
	handleClick: function(event) {
		var span = ReactDOM.findDOMNode(this.refs.span);
		if (span.style.display == "none")
			span.style.display = "inline";
		else
			span.style.display = "none";
		event.stopPropagation();
		event.preventDefault();
	},
    render: function() {  
        return (  
            <div>
				<button onClick={this.handleClick}>顯示 or 隱藏</button>
				<span ref="span">點擊button顯示 or 隱藏</span>
			</div>  
        );  
    }
}); 
var MyInput = React.createClass({  
	getInitialState: function() {
		return {
			text: ''
		};
	},
	handleChange: function(event) {
		this.setState({text: event.target.value});
		event.stopPropagation();
		event.preventDefault();
	},
    render: function() {  
        return (  
            <div>
				<input type="text" onChange={this.handleChange}/>
				<span>{this.state.text}</span>
			</div>  
        );  
    }
});  
setInterval(function() {  
    ReactDOM.render(  
		<div>
			<MyClick />   
			<MyInput /> 
		</div>,
        document.getElementById('content')  
    );  
}, 1000);

注意：若有多個組件，必須在外圍包一個公共組件，一般是<div>，因爲不包的話相當於返回兩個結果。