Question

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

这个（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>
    )
  }
}

如何在this活动中传递onChange？我正在使用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 Context API无法绑定'this'

1 个答案: