浅谈慕课网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>，因为不包的话相当于返回两个结果。