React 中的绑定操作答案

【问题标题】：Bind operation at ReactReact 中的绑定操作
【发布时间】：2019-10-05 17:03:51
【问题描述】：

当我使用 React 的无参数函数和箭头函数结果时，handleClickExample 方法的工作方式符合我的要求。示例：

class App extends Component {

 constructor(props) {
    super(props);
    console.log("constructor", this)
  }

   handleClickExample = () =>{
    console.log( "handleClickExample Method", this);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClickExample}>TIKLA</button>
      </div>
    );
  }
}

结果：当我点击按钮时：

handleClick Method App {props: {…}, context: {…}, refs: {…}, updater: {…}, handleClickExample: ƒ, …}

这是我想要的结果。但是，如果我将相同的代码更改为参数化函数，则单击按钮时该方法不起作用。

例子：

class App extends Component {

 constructor(props) {
    super(props);
    console.log("constrcutor", this)
  }

   handleClickExample = (name) =>{
    console.log(name ,"handleClick Method", this);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClickExample("DOES NOT WORK")}>TIKLA</button>
      </div>
    );
  }
}

结果：当我点击按钮时：

该方法不起作用。我可以解决这个问题。如果我使用箭头函数调用该方法，问题就解决了。

<button onClick={ () => this.handleClickExample("DOES NOT WORK")} ></button>
Or
<button onClick={this.handleClickExample('DOES NOT WORK').bind(this)}>TIKLA</button>

参数化函数和无参数函数有什么区别？为什么我在使用参数函数时也必须使用箭头函数。或者我为什么要绑定？或者为什么我不需要在无参数函数中这样做？他没有说我没有进入这个方法并找到这个。我无法调用该方法。当我单击按钮时，没有任何功能起作用或引发错误。

或者当你这样做时它也有效。

handleClickExample = (name) => (e) => {
     console.log(name ,"handleClick Method", this);
}

为什么我们必须在这里传递 (e) 参数？

【问题讨论】：

标签： reactjs ecmascript-6 arrow-functions

【解决方案1】：

您也可以使用第一种方法。你只需要修改你的 handleClickExample 函数如下：

handleClickExample = (name) => (e) => {
     console.log(name ,"handleClick Method", this);
}

这被称为柯里化。

【讨论】：

这就是它的工作原理。但是为什么我必须传递 (e) 参数？我想了解的是javascript的工作逻辑。
1) this.handleClickExample 表示您正在创建对该函数的引用，以避免在每次渲染时创建全新的回调实例并默认绑定到其父级。
我没听懂你在说什么。为什么我们还要传递 (e) 参数？我可能无法理解，因为我的 Javascript 信息还不够。对不起
e 基本上是一个事件对象，它被传递给 this.handleClickExample

【解决方案2】：

q 是函数

var q = this.handleClickExample // q()

q是函数的返回结果

var q = this.handleClickExample() // cannot call

q 是函数

var q = () => this.handleClickExample() // q()

q 是接受参数的函数

var q = (someArg) => this.handleClickExample() // q('1')

q 是接受参数并返回函数的函数

var q = (someArg) => () => this.handleClickExample() // q('1')()

q 是接受参数的函数并返回也接受参数的函数

var q = (someArg) => (otherArg) => this.handleClickExample() // q('1')('two')

你的代码：

var q = handleClickExample = (name) => (e) => {} // q('myName')(e)
// q returns function that returns function
// name is your custom argument
// e is ClickEvent argument, that onClick is passing to callback

onClick 事件需要函数，可选择接受事件参数

【讨论】：

这很有启发性。谢谢你:)