React从入门到精通系列之(6)事件处理

作者:日期:2017-02-19 13:15:36 点击:389

 

 

五¶••⊿事件处理

应用React元素处理事件与处理DOM元素上的事件非常类似••。不过有一些语法上的差别:

  •  

  • React事件应用驼峰命名法,而不是全部小写命名••。

  •  

  • 应用JSX你传递一个函数作为事件处理程序,而不是一个字符串••。

例如,HTML:

    Active Lasers

在React中略有不同:

    Active Lasers

另一个差别是,你不能返回false来防止React中的默认行动••。 您必须显式调用preventDefault••。 例如,应用纯HTML,为了防止打开新页面的默认链接行动,您可以写:

    Click me

在React中,这可以改为:

function ActiveLink() {
    function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked');
    }
    return (
                    click me
            );
}

这里,e是合成过的event••。 React根据W3C规范定义这些event,因此你不需要担心浏览器兼容性的问题••。

当应用React时,在创立后向DOM元素添加通常不需要调用addEventListener监听器••。 相反,只是在最初渲染元素时供给事件监听器••。

当您应用ES6类定义组件时,常见的模式是将事件处理程序作为类上的公共方法••。 例如,此Toggle组件浮现一个按钮,让用户在“ON”“OFF”状态之间切换:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};    // 这个绑定是必要的,要不然该事件中的this就会是当前实例
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  render() {
    return (
              {this.state.isToggleOn ? 'ON' : 'OFF'}
          );
  }
}
ReactDOM.render(  ,
  document.getElementById('root')
);

你必须十分注意JSX中事件函数的意义••。 在JavaScript中,类中的方法默认不绑定this••。 如果你忘记绑定this.handleClick中的this要害字并将它传递给了onClick事件,当函数实际被调用时,会报出undefined的毛病••。

这不是React中特定的行动; 它是JavaScript中函数正常工作的一部分••。
一般来说,如果你引用一个方法是后面没有(),如onClick = {this.handleClick},就会绑定该方法••。

如果调用bind会使你烦恼,有两种方法可以解决这个问题••。 您可以应用属性初始值设定props来正确处理:

class LoggingButton extends React.Component {  // 应用剪头函数绑定this
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
              Click me
          );
  }
}

默认情况下,在Create React App中启用此语法••。

如果不应用属性初始化语法,可以在回调中应用箭头函数:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 给事件传入一个剪头函数也可以绑定this
    return (
       this.handleClick(e)}>
        Click me
          );
  }
}

此语法的问题是,每次LoggingButton渲染时都会创立不同的回调函数••。 在大多数情况下,这是要被罚款的••。 然而,如果这个回调作为一个prop传递给较低的组件,这些组件可能会做额外的重新渲染••。 我们一般建议在结构函数中绑定以避免这种性能问题••。

 

上一篇: React从入门到精通系列之(5)state管理和生命周期钩子

下一篇: MongoDB基础命令语句

澳洲快乐十分规则 香港跑马注册网址 网易红彩彩票网 吉吉彩票首页 辽宁福彩网 玖玖网彩票网 网易红彩彩票平台 九亿九彩票开户平台 SG飞艇走势图 幸运农场网站