React Context API无法绑定this：输入组件触发Provider方法失败求助

嘿，我来帮你搞定这个React Context里函数绑定的问题～你遇到的核心问题是：在Input组件里用store.handleInput.bind(this)时，这里的this并不是MainProvider的实例（如果Input是函数组件，严格模式下this甚至是undefined），所以绑定后函数里的this指向错误，自然没法正常访问Provider里的内容。

下面给你两种最靠谱的解决方式，都是提前把函数的this绑定好，避免传递后丢失指向：

方法一：在构造函数中手动绑定this #

这是类组件里最经典的绑定方式，在Provider的构造函数里就把handleInput的this绑定到当前实例上，之后不管怎么传递这个函数，指向都不会变：

const MainContext = React.createContext()

class MainProvider extends React.Component {
  constructor(props) {
    super(props)
    // 关键步骤：在这里绑定this，固定函数的上下文
    this.handleInput = this.handleInput.bind(this)
  }

  handleInput(e) {
    console.log(e)
    // 现在可以正常访问this.state或者this.props啦
  }

  render() {
    const store = {
      handleInput: this.handleInput // 直接传递绑定好的函数
    }
    return (
      <MainContext.Provider value={store}>
        {this.props.children}
      </MainContext.Provider>
    )
  }
}

之后在Input组件里，不管是类组件还是函数组件，直接用就行：

// 类组件写法
class Input extends React.Component {
  static contextType = MainContext
  render() {
    return <input onChange={this.context.handleInput} />
  }
}

// 函数组件用useContext写法
import { useContext } from 'react'
function Input() {
  const { handleInput } = useContext(MainContext)
  return <input onChange={handleInput} />
}

方法二：用箭头函数定义组件方法 #

箭头函数会自动继承当前上下文的this，所以不需要手动绑定，写起来更简洁：

const MainContext = React.createContext()

class MainProvider extends React.Component {
  // 用箭头函数定义方法，this自动指向MainProvider实例
  handleInput = (e) => {
    console.log(e)
    // 直接访问this.state毫无压力
  }

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

避坑提醒：别在子组件里绑定 #

你之前尝试的onChange={store.handleInput.bind(this)这种写法一定要避免，一来绑定的this不对，二来每次组件渲染都会生成新的函数，可能导致子组件不必要的重渲染，影响性能。

内容的提问来源于stack exchange，提问作者ozgrozer