美文网首页
React.js的处理事件(三)

React.js的处理事件(三)

作者: 初漾流影 | 来源:发表于2018-03-08 20:15 被阅读0次

    处理事件

    以Toggle 组件为例,使用该组件渲染一个按钮,使用户在“ON”和“OFF”状态之间切换:
    当使用一个 ES6 类 定义一个类组件时,通常的一个事件处理程序是类上的一个方法。

    class Toggle extends React.Component {
              constructor(props){
                  super(props);
                  this.state = {isToggleOn:true};
    
                  //
                  this.handleClick = this.handleClick.bind(this);
              }
    
              handleClick() {
                  this.setState( prevState => ({
                    isToggleOn : !prevState.isToggleOn
                  }) );
              }
    
              render() {
                  return (
                          <button onClick = {this.handleClick}>
                              {this.state.isToggleOn?'ON':'OFF'}
                          </button>
                  );
              }
          }
          
          ReactDOM.render(
              <Toggle />,
              document.getElementById('root')
          );
    

    在JSX回调中必须注意 this 的指向。 在 JavaScript 中,类方法默认没有 绑定 的。如果忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this 会是 undefined

    这不是 React 特有的行为;这是 JavaScript 中的函数如何工作的一部分。 一般情况下,如果你引用一个后面没跟 () 的方法,例如 onClick={this.handleClick} ,那你就应该 绑定(bind) 该方法。

    两种方法解决函数绑定问题

    1.如果你使用实验性的 属性初始化语法 ,那么你可以使用属性初始值设置来正确地绑定(bind) 回调:

    class LoggingButton extends React.Component {
      // 这个语法确保 `this` 绑定在 handleClick 中。
      // 警告:这是 *实验性的* 语法。
      handleClick = () => {
        console.log('this is:', this);
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            Click me
          </button>
        );
      }
    }
    

    以上例子中,属性初始值设置体现在handleClick 为属性,后面的箭头函数为初始值。这个语法在 创建 React App 中是默认开启的。

    2.如果你没有使用属性初始化语法,可以在回调中使用一个 箭头函数

    class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
    
      render() {
        // 这个语法确保 `this` 被绑定在 handleClick 中
        return (
          <button onClick={(e) => this.handleClick(e)}>
            Click me
          </button>
        );
      }
    }
    

    以上LoggingButton为一个类组件, 这个语法的问题是,每次 LoggingButton 组件渲染时都创建一个不同的回调。在多数情况下,没什么问题。然而,如果这个回调被作为 prop(属性) 传递给下级组件,这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定,以避免这类性能问题。

    将参数传递给事件处理程序

    在循环内部,通常需要将一个额外的参数传递给事件处理程序。 例如,如果 id 是一个内联 ID,则以下任一方式都可以正常工作:

    <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
    

    上述两行代码是等价的,分别使用箭头函数 arrow functionsFunction.prototype.bind

    上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

    通过 React 元素处理事件跟在 DOM 元素上处理事件的区别

    1.语法上的区别

    • React 事件使用驼峰命名,而不是全部小写。
    • 通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串。

    例如在HTML中处理事件

    <button onclick="activateLasers()">  // "activateLasers()"为字符串
      Activate Lasers
    </button>
    

    但在 React 中略有不同:

    <button onClick={activateLasers}> // activateLasers为函数
      Activate Lasers
    </button>
    

    2.另一个区别是,在 React 中你不能通过返回 false(即 return false; 语句) 来阻止默认行为。必须明确调用 preventDefault

    例如,对于纯 HTML ,要阻止链接打开一个新页面的默认行为,可以这样写:

    <a href="#" onclick="console.log('The link was clicked.'); return false">
      Click me
    </a>
    

    但在 React 中, 应该这么写:

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

    这里, e 是一个合成的事件。 React 根据 W3C 规范 定义了这个合成事件,所以不需要担心跨浏览器的兼容性问题。

    当使用 React 时,一般不需要调用 addEventListener 在 DOM 元素被创建后添加事件监听器。相反,只要当元素被初始渲染的时候提供一个监听器就可以了。

    参考:

    相关文章

      网友评论

          本文标题:React.js的处理事件(三)

          本文链接:https://www.haomeiwen.com/subject/udkxtftx.html