Reactjs事件处理的三种写法
发布时间:2020-12-15 20:16:55 所属栏目:百科 来源:网络整理
导读:目录 前言 1. 在回调函数中使用箭头函数 2. 在构造器中绑定this 3. 使用类字段语法 事件参数的传递。 总结 前言 Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法。 React 事件名称使用驼峰命名,而不是全小写命名。 使用JSX,可以将函数作为事
目录
前言Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法。
es6的class语法规定,类的方法内部,如果含有this,它默认指向类的实例。但是,单独使用该方法,可能报错,this指向不明确。 1. 在回调函数中使用箭头函数在onClick的时候,使用箭头函数。这个语法确保 class ToggleBtn extends React.Component { constructor() { super() this.state = { isToggleOn: true } } handleClick(e) { this.setState({ isToggleOn: !this.state.isToggleOn }) } render() { return ( <div> <button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button> </div> ) } } 2. 在构造器中绑定this优势:通用。 class ToggleBtn extends React.Component { constructor() { super() this.state = { isToggleOn: true } // 这个bind方法是必须的,以确保`this`可以在回调函数handleClick中使用 this.handleClick = this.handleClick.bind(this) } handleClick(e) { this.setState({ isToggleOn: !this.state.isToggleOn }) } render() { return ( <div> <button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button> </div> ) } } 3. 使用类字段语法优点:简单方便。 class ToggleBtn extends React.Component { constructor() { super() this.state = { isToggleOn: true } } // 这个语法确保`this` 绑定在handleClick中 handleClick = (e) => { this.setState({ isToggleOn: !this.state.isToggleOn }) } render() { return ( <div> <button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button> </div> ) } } 事件参数的传递。使用箭头函数和方法原型属性的bind方法,两种方式传递参数的写法。
<button onClick={(e) => this.deleteRow(id,e) }>Delete Row</button> <button onClick={this.deleteRow.bind(this,id)}>Delete Row</button> 总结这几种方式,与类中this的绑定问题,解决方式类似。 尽量使用方法2和方法3。方法1如果将事件传递给子组件,可能会有重新渲染的耗能问题。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |