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

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

代码

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”上下文

1 个答案: