React 中的事件处理(2)

事件处理

React 元素采用类似 DOM0 标准中的事件属性定义方法

  1. JSX<button onClick={this.doSth}>点击</button>

  2. 直接创建 React 元素方法:

React.createElement(
  'button',
  {
    onClick: { this.doSth }
  },
  '点击'
)
  1. 类组件
class App extends React.Component {
  doSth(e) {
    console.log("Somthing is Done");
  }
  render() {
    return <button onClick={this.doSth}>点击</button>;
  }
}

ReactDOM.render(<App />document.querySelector("#app"));

React 事件对象(event)

React 重新定义了事件对象,SyntheticBaseEvent: 合成基础事件对象

SBE 是遵守 W3C 事件对象规范的,不存在任何浏览器兼容性问题

为什么 React 要将事件处理直接在 React 元素上绑定?

  1. React 认为事件处理和视图是有程序上直接关系的,事件处理和视图写在一起可以更加直观的表述视图和逻辑的关系,更好维护
  2. JSX 语法不是 HTML 语法中的 addEventListener 绑定

this 指向

  1. 默认处理函数的 this 为 undefined
  2. ES6 class 模块默认不对事件处理函数进行 this 的再绑定

解决 this 指向的方法

  1. 构造器中 bind(this)
constructor(props) {
  super(props);
  this.doSth = this.doSth.bind(this);
}
  1. 视图标记中 bind(this)
render() {
  return <button onClick={this.doSth.bind(this)}>点击</button>;
}
  1. 回调 + 箭头函数(React 不建议使用)
render() {
  return <button onClick={() => this.doSth()}>点击</button>;
}
  • render 函数每次执行的时候,都会创建一个新回调
  • 当给子组件的属性进行函数传递的时候,由于每次都创建一个回调,子组件每次都会接收一个新的函数,可能会触发子组件的 render
  • 解决方法 class fields
// 实验性写法
doSth = () => {
  console.log(this);
}

render() {
  return <button onClick={this.doSth}>点击</button>;
}

其他

// 回调,要显式传入事件对象
doSth1 = (p1, p2, e) => {
  console.log(p1, p2, e);
}

// bind 隐式传入事件对象,事件对象都在最后一个参数
doSth2 = (p1, p2, e) => {
  console.log(p1, p2, e);
}

render() {
  return (
    <div>
      <button onClick={(e) => this.doSth1(1, 2, e)}>点击</button>
      <button onClick={this.doSth2.bind(this, 12)}>点击</button>
    </div>

  );
}


原文始发于微信公众号(前端华先生):React 中的事件处理(2)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/55362.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!