react-事件相关

事件相关

一 React 中的事件处理

需要理解的概念有：

• React事件的原理
• React事件的命名规则，驼峰式
• 需要传入函数作为事件处理函数，不是字符串。并且传入函数不需要加小括号，因为不是调用而是指向
• React中的事件不能通过return来阻止默认事件，必须preventDefault阻止
• 官网了解一下什么是合成事件
• 事件绑定this指向
  • 可以在事件绑定处利用bind
  • 可以在构造函数处利用bind
  • 可以利用箭头函数定义
  • 可以在事件绑定处利用箭头函数onClick={()=>{ this.fn() }} 这时候是有括号的

	<div id="test"></div>
	<script type="text/babel">
		class Demo extends React.Component {
			render() {
				return (
					<div>
						{/*
							在React可以使用如下的事件操作方式，
							最终都会绑定到ul元素上，
							因为它底层都是通过事件委托实现
						*/}
						{/*
						<ul>
							<li onClick={this.fn}>体育新闻</li>
							<li onClick={this.fn}>娱乐新闻</li>
							<li onClick={this.fn}>社会新闻</li>
							<li onClick={this.fn}>财经新闻</li>
						</ul>
						*/}
                        <button>新增li标签</button> //事件委托解决性能问题
						<input ref="userinput" type="text" />
						&nbsp;
						<button onClick={this.showData}>
							点我提示左侧数据
						</button>
						&nbsp;
						<input onBlur={this.showData2}
							type="text"
							placeholder="失去焦点提示数据" />
					</div>
				)
			}
			showData = () => {
				alert(this.refs.userinput.value)
			}
			showData2 = (event) => {
				const { target } = event
				alert(target.value)
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

总结：

1 React底层并没有使用原生的DOM事件，ondbclick(原生)—>onDoubleClick(React)（合成事件）

2 React实现了一套非常高效的事件系统，包含：注册事件，存储事件，绑定事件，调用事件

3 React的事件在原生的基础上做了极大的优化，减少内存开销，而且还解决了一个兼容性问题

4 React中的事件都是通过事件委托的方式实现的。

5 React中通过onXxxx去绑定事件（注意大小写）

6 可以通过event.target得到触达事件的DOM元素。

补充：event.target和event.currentTarget的差异

绝大多数情况下，event.target和event.currentTarget得到的是同一个对象内容

event.currentTarget是事件绑定对象

event.target是事件触发对象

应用到事件委托中

二 非受控组件

需要理解的概念有：

• 什么是非受控组件：组件中需要进行DOM的操作，通过获取DOM节点获取输入，而非state，利用是现找DOM对象，主要使用ref

	<div id="test"></div>
	<script type="text/babel">
		class Login extends React.Component {
			render() {
				return (
					<form onSu