Question

我在React中创建了一个组件，我在其中使用了一些功能 e.g。

class A {
   changeDid(e) {

  }
   render() {
    return (
      <input type="text" onChange{this.changeDid.bind(this)}>
    )
  }
}

我想了解一行this.changeDid.bind（this）谁可以帮我这个事？？

Answer 1

bind()方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

this.changeDid.bind(this)表示在changeDid this中会引用A，因此您可以获得与A相关的方法。

class A {
  changeDid(e) {
     this.someMethod();
  }

  someMethod() {
    // ... 
  }

  render() {
    return (
      <input type="text" onChange={this.changeDid.bind(this)}>
    )
  }
}

但如果您转到onChange={ this.changeDid }，则this将引用全局范围（在浏览器中为window，如果您使用strict mode则为undefined），之前的示例无法使用，因为someMethod中存在A但window中不存在<{1}}

Answer 2

我为你创造了一个简单的例子。

class Example extends React.Component {
  constructor(){
    this.state = {
      item : 'hello World'
    }
    /* this.click = this.click.bind(this) */
  }
  click(){
     console.log(this)
     console.log(this.state.item)
  }
    render(){
    return <div>
       <button onClick={this.click}>Click Me</button>
    </div>
  }
}

React.render(<Example />, document.getElementById('container'));

因此，如果您点击一个按钮，您将在console中找到下一个：

 console.log(this) // undefined 
 console.log(this.state.item) // Type Error, Cannot read property 'state' of undefined

发生这种情况是因为click方法this内部链接到undefined，但我们希望显示states。

你怎么解决？为确保我们在click方法中获得正确的上下文，我们bind(this)。从此行/* this.click = this.click.bind(this) */删除评论，您将获得正确的方法行为。

工作示例fiddle

我希望它会对你有所帮助。

感谢。

反应组件中的绑定功能

2 个答案: