Question

我有这个代码

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.dropDownUpdate = this.dropDownUpdate.bind(this);
  }

  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });

我想知道我是否可以重构

this.dropDownUpdate = this.dropDownUpdate.bind(this);

到

this.dropDownUpdate = this.dropDownUpdate;

如果是，为什么或为什么不呢？我只是看到它正在以这种方式完成

this.dropDownUpdate = this.dropDownUpdate;

我不确定是否可以将其应用于代码。

Answer 1

要注意的一件事是，当您编写：

class BottomPanel extends React.Component<Props, {}> {
  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}

（当前）这不是有效的ES6语法。您不能以这种方式为类变量分配等号。它起作用的原因是因为transform-class-properties babel插件，更多内容在下面。

有关更多详细信息，请参见此问题和答案：

ES6 class variable alternatives

从技术上讲，声明类变量的正确方法是使用this关键字，例如：

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
      this.dropDownUpdate = this.dropDownUpdate.bind(this)
  }

   dropDownUpdate(e) {
       this.setState({ dropDownValue: e.currentTarget.textContent });
   }
}

为什么不能这样做：

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
      this.dropDownUpdate =e => this.setState({ dropDownValue: e.currentTarget.textContent });
  }
}

查看此信息：Can I use arrow function in constructor of a react component?

现在的事情是-我假设您正在使用Create React App-transform-class-properties babel插件附带的-这就是第一个声明起作用的原因。

看看为什么要使用this.dropDownUpdate = this.dropDownUpdate.bind(this);技巧的问题。没必要-但是您会遇到调试器问题（浏览器不知道transform-class-properties babel变换）。

Chrome, Firefox debuggers not displaying the correct value for 'this' in a react app

否则，您可以清除类方法，例如：

class BottomPanel extends React.Component<Props, {}> {
  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}

Answer 2

由于dropDownUpdate是Arrow函数，因此无需

即可正常工作

this.dropDownUpdate = this.dropDownUpdate;或

this.dropDownUpdate = this.dropDownUpdate.bind(this);

在Arrow函数中，this的值是按词法绑定的，与常规函数不同，this的值根据调用函数的上下文而变化。

Answer 3

只需如下定义您的功能。

dropDownUpdate =（事件）=> { .... }

它不需要绑定在构造函数中

重构反应这种结合

3 个答案: