React中的事件处理

作者daliane

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

  • React事件绑定属性的命名采用驼峰式写法，而不是小写。
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)

  • React 中稍稍有点不同：

    <button onclick=”{activateLasers}”>
      Activate Lasers
    </button>

    在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为 

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
 
  return (
    <a href="#" onclick="{handleClick}">
      Click me
    </a>
  );
}

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮： 

import React, { Component } from 'react';

class LikeButton extends Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            liked: { liked: false }
        };

        // ES6 类中函数必须手动绑定
        this.handleClick = this.handleClick.bind(this);
    }
    componentWillMount() {
        console.log('Component WILL MOUNT!在渲染前调用,在客户端也在服务端')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!在第一次渲染后调用，只在客户端')
    }
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!在组件接收到一个新的prop时被调用')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log("shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用");
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!在组件接收到新的props或者state但还没有render时被调用');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE在组件完成更新后立即调用!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT在组件从 DOM 中移除的时候立刻被调用!')
    }
    handleClick(event) {
        this.setState({
            liked: !this.state.liked
        });
        this.refs.myInput.value = "哈哈，好用了！";
        // this.state = { liked: !this.state.liked };
    }
    render() {

        let text = this.state.liked ? '喜欢' : '不喜欢';
        return ( < div > < input type = "text"
            ref = "myInput" / > < button onClick = {
                this.handleClick
            } > {
                text
            } < /button></div > );
    }
}

export default LikeButton

类似文章