React 上下文 API 无法绑定 'this'

Question

当我在 <Input> 组件内部的输入中键入任何内容时，我想执行 <MainProvider> 组件内部的 handleInput() 函数。

这个 (onChange={store.handleInput.bind(this)}) 看起来可以工作，但无法通过 this。

在控制台中我刚收到 undefined 消息。

这是一个示例代码。

const MainContext = React.createContext()

class MainProvider extends React.Component {
  handleInput (e) {
    console.log(e)
  }

  render () {
    const store = {
      handleInput: () => this.handleInput()
    }

    return (
      <MainContext.Provider value={store}>
        {this.props.children}
      </MainContext.Provider>
    )
  }
}

class Input extends React.Component {
  render () {
    return (
      <MainContext.Consumer>
        {(store) => (
          <input {...this.props} onChange={store.handleInput.bind(this)} />
        )}
      </MainContext.Consumer>
    )
  }
}

class App extends React.Component {
  render () {
    return (
      <MainProvider>
        <Input name='one' />
        <Input name='two' />
      </MainProvider>
    )
  }
}

如何在onChange活动中通过this？我正在使用 React 16.3.1。

Answer 1

问题出现是因为您在 MainProvider 组件中使用了箭头函数，它覆盖了您调用函数时传递的上下文

  render () {
    const store = {
      handleInput: () => this.handleInput() // using arrow function here overrides the contect
    }

  }

改为

class MainProvider extends React.Component {
  handleInput (e) {
    console.log(e)
  }

  render () {
    const store = {
      handleInput: this.handleInput
    }

    return (
      <MainContext.Provider value={store}>
        {this.props.children}
      </MainContext.Provider>
    )
  }
}

但是在这种情况下，您将明确需要从子组件进行绑定，否则它将从调用它的地方获取上下文。

React 上下文 API 无法绑定 'this'

React Context API can't bind 'this'

bind

this

reactjs