Question

我有一个事件处理程序，它调用胖箭头函数来运行方法。

import React, { Component } from 'react';

class App extends Component {
  sayHi = msg => {
    console.log(msg);
  };

  render() {
    return (
      <div>
        <button onClick={() => this.sayHi('Hi')}>Console Hi!</button>
      </div>
    );
  }
}

export default App;

我正在学习有关上下文和bind（）的知识，我想转换此示例以对此进行绑定。我的问题是当胖箭头函数执行方法（又称为“嗨”）时传递给我的参数

有没有办法保留这样的东西...

<button onClick={this.sayHi('Hi')}>Console Hi!</button>

我尝试了不同的方法，但收效不佳。主要集中在

  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }

  sayHi = () => {
    console.log(msg);
  };

是的...我不想将“ Hi”移至方法或构造函数。我正在尝试学习和理解。我将不胜感激任何帮助或方向。

Answer 1

您正在混合事物。针对您的情况有两种情况，您正试图同时使用它们。

与此绑定

何时需要将函数绑定到RewriteEngine On # Unless directory, remove trailing slash RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.+)/$ /$1 [NE,R=301,L]？如果要像按钮一样在回调中调用函数（当然是其中一种情况），并且需要在此函数中使用this，则需要对其进行绑定。如果您不使用this，那么也不需要绑定它。

this

这里，您不需要绑定它，也可以将函数与它的引用一起使用，因为没有参数。

sayHi() {
    console.log("hi");
  };

  render() {
    return (
      <div>
        <button onClick={this.sayHi}>Console Hi!</button>
      </div>
    );
  }
}

此处您在函数中使用constructor(props) { super(props); this.state = { name: "foo", } this.sayHi = this.sayHi.bind(this); } sayHi() { console.log(this.state.name); }; render() { return ( <div> <button onClick={this.sayHi}>Console Hi!</button> </div> ); } }，因此需要将其绑定到构造函数中或将其定义为箭头函数。

您的情况

现在，您的情况：您正在将函数定义为箭头1，如果在那里使用this，则不再需要绑定它。但是您没有使用它，则无需使用箭头功能。另外，您需要向其传递参数。因此，您需要找到一种方法来实现此目的。

第一种方法，对this使用箭头功能。由于如果您在此处不使用回调，则无法使用onClick。

click

如果您像sayHi(msg) { console.log(msg); }; render() { return ( <div> <button onClick={() => this.sayHi("hi")}>Console Hi!</button> </div> ); } }这样使用，则该函数在第一个渲染中调用，而不是单击。

您也可以在这里使用this.sayHi("hi")作为第二种方法。

.bind

请参见，我们使用绑定，但是由于不需要，所以不使用sayHi(msg) { console.log(msg); }; render() { return ( <div> <button onClick={this.sayHi.bind(null,"hi")}>Console Hi!</button> </div> ); } }。我们没有在this函数中使用this。

将此绑定到方法的接收参数上

1 个答案: