了解 onClick 处理程序中的 "this" 上下文

Question

我很难理解 this 在 onClick 函数中的工作原理。我做了一个小 CodePen 例子 here.

const history = {
  init() {
    this.counter = 0

    return this;
  },

  increment() {
    this.counter++;
  }
}

const a = Object.create(history).init()

const MyComponent = () => {

  a.increment();

  // a's context is lost in the onClick function, how to
  // make this work?

  return (
    <>

      <button onClick={a.increment}>
        click to increment
      </button>
    <p>{a.counter}</p>
      </>
  )
}

我意识到 this 上下文是特定于调用站点的，它重新绑定到 onClick 函数，因此我需要让它工作的上下文丢失了。但我不知道如何解决。我意识到我可以使用 lambda 语法或以另一种方式重构对象，从而完全避免 this，但这只是在回避问题。

任何人都能够提供解决方案并快速回答实际情况？

Answer 1

您可以使用 bind 函数在递增函数中设置 this 的值。您还需要更新组件的状态以重新呈现它。

代码

const history = {
  init() {
    this.counter = 0;
    return this;
  }, 

  increment(setCounter) {
    setCounter(++this.counter);
  }
}

const a = Object.create(history).init();

const MyComponent = () => {
  const [counter, setCounter] = useState(a.counter);  

  return (
    <>
      <button onClick={a.increment.bind(a, setCounter)}>
        click to increment
      </button>
      <p>{a.counter}</p>
    </>
  )
};

见working example

了解 onClick 处理程序中的 "this" 上下文

Understanding "this" context in onClick handler

onclick

this

reactjs

codepen