javascript - 在onclick react中传递函数名和通过回调调用有什么区别

Question

我想知道这两个语句在反应中的区别。

<Button onClick={this.Callme}></Button>

<Button onClick={()=>this.Callme()}></Button>

它只是语法，或者在功能上也有任何区别。谢谢

标签： javascriptreactjs

Answer 1

如果函数依赖于实例的调用上下文，并且函数尚未绑定到当前实例，则第一个代码将不起作用，因为this内部callMe将是undefined：

class Component extends React.Component {
  name = 'component_name';
  Callme() {
    console.log(this.name);
  }
  render() {
    return (
      <button onClick={this.Callme}>Click</button>
    );
  }
}

// Render it
ReactDOM.render(
  <Component />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

第二个代码有效，因为this匿名箭头函数中的 将从外部范围继承this，实例：

class Component extends React.Component {
  name = 'component_name';
  Callme() {
    console.log(this.name);
  }
  render() {
    return (
      <button onClick={() => this.Callme()}>Click</button>
    );
  }
}

// Render it
ReactDOM.render(
  <Component />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果Callme方法不需要引用实例，那么任何一种都onClick可以。

此常见问题的其他解决方案包括：

• 在构造函数中绑定方法（this.Callme = this.Callme.bind(this)）
• 设置回调时绑定方法( onClick={this.Callme.bind(this)}>)

• 将方法定义为构造函数中的箭头函数（或类字段），而不是原型的属性

  class Component extends React.Component {
    this.Callme = () => {
      console.log(this.name);
    }