React升职记 ----- 事件处理

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 react中事件不需要带括号

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); }

默认是件需要显性阻止，如上e.prevetDefault（） React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。

class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') );

你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。 可以显性绑定this,也可以用箭头函数，因为箭头函数中的this指向定义所在作用域的对象

向事件处理程序传递参数

以下两种方式都可以向事件处理函数传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。