06. react 初次见面---事件处理
2018-01-12 00:00
330 查看
摘要: React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同。
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
React事件绑定属性的命名采用驼峰式写法,而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
例如,传统的 HTML:
React 中稍稍有点不同:
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault 。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:
在 React,应该这样来写:
在这里,
使用 React 的时候通常你不需要使用
当你使用 ES6 class 语法来定义一个组件的时候,事件处理器会成为类的一个方法。例如,下面的
你必须谨慎对待 JSX 回调函数中的
这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。通常情况下,如果你没有在方法后面添加
如果使用
这个语法在 Create React App 中默认开启。
如果你没有使用属性初始化器语法,你可以在回调函数中使用 箭头函数:
使用这个语法有个问题就是每次
上述两种方式是等价的,分别通过 arrow functions 和
上面两个例子中,参数
值得注意的是,通过
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
React事件绑定属性的命名采用驼峰式写法,而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
例如,传统的 HTML:
<button onclick="activateLasers()"> Activate Lasers </button>
React 中稍稍有点不同:
<button onClick={activateLasers}> Activate Lasers </button>
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault 。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:
<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a>
在 React,应该这样来写:
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); }
在这里,
e是一个合成事件。React 根据 W3C spec 来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。查看 SyntheticEvent 参考指南来了解更多。
使用 React 的时候通常你不需要使用
addEventListener为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。
当你使用 ES6 class 语法来定义一个组件的时候,事件处理器会成为类的一个方法。例如,下面的
Toggle组件渲染一个让用户切换开关状态的按钮:
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') );
你必须谨慎对待 JSX 回调函数中的
this,类的方法默认是不会绑定
this的。如果你忘记绑定
this.handleClick并把它传入
onClick, 当你调用这个函数的时候
this的值会是
undefined。
这并不是 React 的特殊行为;它是函数如何在 JavaScript 中运行的一部分。通常情况下,如果你没有在方法后面添加
(),例如
onClick={this.handleClick},你应该为这个方法绑定
this.
如果使用
bind让你很困惑,这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数:
class LoggingButton extends React.Component { // This syntax ensures `this` is bound within handleClick. // Warning: this is *experimental* syntax. handleClick = () => { console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } }
这个语法在 Create React App 中默认开启。
如果你没有使用属性初始化器语法,你可以在回调函数中使用 箭头函数:
class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // This syntax ensures `this` is bound within handleClick return ( <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } }
使用这个语法有个问题就是每次
LoggingButton渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
1. 向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如,若是id是一个内联 id,以下两种方式都可以向事件处理程序传递参数:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的,分别通过 arrow functions 和
Function.prototype.bind来为特定事件类型添加事件处理程序。
上面两个例子中,参数
e作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过
bind的方式,事件对象以及更多的参数将会被隐式的进行传递。
值得注意的是,通过
bind方式向监听函数传参,在类组件中定义的监听函数,事件对象
e要排在所传递参数的后面,例如:
class Popper extends React.Component{ constructor(){ super(); this.state = {name:'Hello world!'}; } preventPop(name, e){ //事件对象e要放在最后 e.preventDefault(); alert(name); } render(){ return ( <div> <p>hello</p> {/* Pass params via bind() method. */} <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a> </div> ); } }
相关文章推荐
- DOM2级事件绑定的兼容处理
- JS原生事件处理(跨浏览器)
- android手势操作滑动效果触摸屏事件处理
- jQuery事件处理: 别再乱用“return false”了
- 赵雅智_java GUI事件处理
- Cocoa Touch事件处理流程--响应者链
- js div 排除内部的点击事件 就是 冒泡的处理
- 简单事件处理
- .NET Remoting中的事件处理
- 在view上加UITapGestureRecognizer,按钮不触发单击事件的处理方法
- 【资料】对Java Swing 中三种事件处理方法的比较
- 整理个跨浏览器的事件处理程序
- Android 组件学习【启发】 如何处理好多个组件的多个事件 收藏
- 从ListView与ScrollView的冲突调查android view的事件处理机制
- 浅析Java与C#的事件处理机制
- android开发步步为营之22:处理Activity中的back按钮事件
- j2me经验总结之事件处理
- 【Appium+python】特殊键盘事件处理-国产机型的搜索处理。
- Javascript跨浏览器事件处理
- Android Preference 事件处理