React 学习之路 （五）事件处理

头像
Meils
    阅读 6 分钟

    事件处理

    图片描述

    React元素的事件，和DOM事件处理有着相似之处，但是也有着不同之处。
    • React事件绑定属性的命名采用驼峰命名
    • 如果使用React你需要使用jsx语法，就需要传入一个函数作为事件处理函数，而不是像HTML中传入一个字符串
    // 传统的HTML
<button onclick="activateLasers()">
  Activate Lasers
</button>
    // React中
<button onClick={activeClass}>
点击
</button>

    另外React中不能使用return false来阻止默认行为，你必须明确使用preventDefault.

    function ActionClick () {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.')
  }

  return (
    <a href="#" onClick={handleClick}><点击我/a>
  )
}
    使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器
    • 当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
    class Toggle extends React.Component{
      constructor(props) {
        super(props);
        this.state = {
          isToggle: false
        }

        this.handleClick = this.handleClick.bind(this)
      }

      handleClick () {
        this.setState((prevState) => {
          return {isToggle: !prevState.isToggle}
        })
        /**
          类的方法默认是不会绑定 this 的。
          如果你忘记绑定 this.handleClick 并把它传入 onClick, 
          当你调用这个函数的时候 this 的值会是 undefined。

          这就是为什么会报错setState未定义的原因了
        */
      }

      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggle ? 'ON' : 'OFF'}
          </button>
        )
      }
    }


    ReactDOM.render(
      <Toggle />,
      document.getElementById('app')
    )
  </script>
</body>
</html>
    类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

    除了bind之外还有两种方法

    • 一、属性初始化器语法, ES7的属性初始化语法（ property initializers ）

    这个语法在 Create React App 中默认开启。

    //代码4
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
  }

  handleClick = () => {
    this.setState({
      number: ++this.state.number
    });
  }
  
  render() {
    return (
      <div>
        <div>{this.state.number}</div>
        <button onClick={this.handleClick}>
          Click
        </button>
      </div>
    );
  }
}
    这样一来，再也不用手动绑定this了。但是你需要知道，这个特性还处于试验阶段，默认是不支持的。如果你是使用官方脚手架Create React App 创建的应用，那么这个特性是默认支持的。你也可以自行在项目中引入babel的transform-class-properties插件获取这个特性支持。
    • 二、回调函数中使用 箭头函数：
    //代码5
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
    class Toggle extends React.Component{
      constructor(props) {
        super(props);
        this.state = {
          isToggle: false
        }
      }

      handleClick (){
        this.setState((prevState) => {
          return {isToggle: !prevState.isToggle}
        })
      }

      render() {
        return (
          <button onClick={(e) => this.handleClick(e)}>
            {this.state.isToggle ? 'ON' : 'OFF'}
          </button>
        )
      }
    }


    ReactDOM.render(
      <Toggle />,
      document.getElementById('app')
    )
  </script>
</body>
</html>
    使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常【建议】【在构造函数中绑定或使用属性初始化器语法来避免这类性能问题】。

    向事件处理程序传递参数

    • <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    // 1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
    class Toggle extends React.Component{
      constructor(props) {
        super(props);
        this.state = {
          isToggle: false
        }
      }
      
      handleClick (id, e){
        console.log(id)
        this.setState((prevState) => {
          return {isToggle: !prevState.isToggle}
        })
      }

      render() {
        return (
          <button onClick={(e) => this.handleClick(1, e)}>
            {this.state.isToggle ? 'ON' : 'OFF'}
          </button>
        )
      }
    }


    ReactDOM.render(
      <Toggle />,
      document.getElementById('app')
    )
  </script>
</body>
</html>
    • <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
    class Toggle extends React.Component{
      constructor(props) {
        super(props);
        this.state = {
          isToggle: false
        }
      }
      
      handleClick (id){
        console.log(id)
        this.setState((prevState) => {
          return {isToggle: !prevState.isToggle}
        })
      }

      render() {
        return (
          <button onClick={this.handleClick.bind(this, 1)}>
            {this.state.isToggle ? 'ON' : 'OFF'}
          </button>
        )
      }
    }


    ReactDOM.render(
      <Toggle />,
      document.getElementById('app')
    )
  </script>
</body>
</html>
    react
    Meils
    1.6k 声望157 粉丝

    前端开发实践者

    « 上一篇
    React 学习之路 （四） state & 生命周期
    下一篇 »
    React 学习之路 （六）条件渲染

    引用和评论

    推荐阅读
    头像
    微信小程序知识点总结（一）

    Meils赞 1阅读 6k

    头像
    一些react使用小技巧（上）

    夕水赞 10阅读 1.4k

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 1.4k评论 5

    头像
    一些react使用小技巧（下）

    夕水赞 5阅读 1.5k评论 6

    头像
    深入浅出React中的refs

    夕水赞 3阅读 1.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 534评论 1

    头像
    ReactNative开发笔记（持续更新...）

    kovli阅读 4.9k

    0 条评论
    得票最新