Question

  export default class DetailsPage extends React.PureComponent {
constructor() {
    super();
     this.state = {
        data: '',
        isModalOpen: false,
    };

  **//this.openModal = this.openModal.bind(this);**
    }
openModal() {
      console.log(this, "this in Handler");
    this.setState({ isModalOpen: true });
}

closeModal() {
    this.setState({ isModalOpen: false });
}

案例1（点击处理程序中没有绑定）

    render() {

    return (

       (<div className="left">

                <button className="btn btn btn-primary" type="button" 
                 onClick={this.openModal}>Edit</button>
         </div>
       );
     )
  }
}

案例2（与此相关）

    render() {

    return (

       (<div className="left">

                <button className="btn btn btn-primary" type="button" 
                 onClick={this.openModal.bind(this)}>Edit</button>
         </div>
       );
     )
  }
}

在我的点击处理程序openModal()中，我写了console.log(this)

案例1 ：＆＃34; THIS＆＃34;反应出来NULL。

案例2 ：＆＃34; THIS＆＃34;出来是组件的（这是完全可以的）。

我的疑惑：

为什么＆＃34;这个＆＃34;在第一种情况下出现NULL。
super()在构造函数中的用途是什么？我已经读过它，并且知道如果我们移除super()以及super（）和amp;之间的区别会发生什么。超（道具）。但是，当我们调用super()时，我想知道后台发生的功能。

Answer 1

此问题已在variety of ways中提出并回答 - 但我最喜欢的可能是ES2015箭头函数语法：

class Foo extends React.Component {
    someMethod = () => {
        // "this" is bound automatically!
        console.log(this, "this in Handler");
        this.setState({ isModalOpen: true });
    }
}

作为一个警告，有pros and cons总是这样做 - 最常被引用的是“表现”。 Twitter战争一直在争论，但IMO Ryan Florence（React Router的合着者）said it best。

这个＆＃34; THIS＆＃34;的价值在React中的处理函数中没有绑定函数

1 个答案: