这是我参与更文挑战的第19天，活动详情查看：更文挑战
React中的事件处理
- React中的事件的命名采用小驼峰的命名方式，小驼峰的实例onClcik
- 传统的HTML事件处理函数传入的是一个字符串
<button onclick="activateLasers()"> Activate Lasers </button> 复制代码
- React中事件处理通过大括号进行包裹
<button onClick={activateLasers}> Activate Lasers </button> 复制代码
- 在React中要想阻止默认行为必须要通过preventDefault，不能通过返回false的方式。
传统的 HTML 中阻止表单的默认提交行为。
<form onsubmit="console.log('You clicked submit.'); return false"> <button type="submit">Submit</button> </form> 复制代码
React中阻止表单的默认提交行为
function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); } 复制代码
- React监听DOM元素，一般不是通过addEventListener。而是通过组件中的方法。
- 谨慎的对待JSX语法中回调函数的this,class的方法默认不会绑定this,为了解决这类问题，我们一般在回调函数中使用箭头函数。
class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 return ( <button onClick={() => this.handleClick()}> Click me </button> ); } } 复制代码
向事件处理程序传递参数
官方描述：在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> 复制代码
- 上面的两种方式是等价的，一种是通过箭头函数，一种是通过bind来绑定JSX回调函数中的this，然后传入参数。
官方描述：在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
解读
- 通过箭头函数的方式，事件对象需要显示传递，而通过bind则可以进行隐式传递。
欢迎大家关注我的专栏，一起学习React官方文档，每日更新哦！
