react 入坑笔记（四） - React 事件绑定和传参

React 事件处理

　　建议：在了解 js 的 this 取值后食用更佳。

一、react 与 Html 中用法的异同和注意点

　　html 中的绑定事件的写法：

<button onclick="activateLasers()">  // onClick = "xxxx()"
    激活按钮
</button>

　　react 中的写法：

<button onClick={activateLasers}>  // onclick = { xxxx }
     激活按钮
</button>

 

　　在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 必须明确的使用 preventDefault。

　　例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('点击链接'); return false">  // return false
    点我
</a>

 

　　但是，在 react 中，阻止默认行为必须得用下面的方式：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();    // preventDefault()
    console.log('链接被点击');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      点我
    </a>
  );
}

　　

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

 

二、绑定事件处理函数

　　首先一个例子：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
 
    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    // 这是其中的一种写法
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({            // prevState 会在后面关于 setState 中详细介绍
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

 　　为什么需要这样写？

　　我的看法是和 this、 bind() 以及 函数的执行符号 有关。函数执行的符号是 "()"。

1.为什么在之前的组件案例(入坑笔记（二）的 Clock 组件)中的 tick 方法不需要绑定？

 

你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

 

　　函数绑定的其他两种方法：

　　　　1.使用 ES6 的箭头函数来定义组件中的函数（属性初始化语法）：

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

 

　　　　2.render 函数中使用回调函数（不建议使用）：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>  // 这边实际上是执行了一个回调函数，在回调函数中执行 handleClick 方法
        Click me
      </button>
    );
  }
}

 

三、向事件处理函数传递参数（无参函数 -> 有参函数）

　　两种方式，等价：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>    // 回调形式传参
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>   // bind() 形式传参

　　

　　值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，例如:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}