Question

我想知道如何使用ES6的类箭头函数编写以下代码。

class BooksApp extends React.Component {
   constructor(props) {
   super(props);
   this.handleBookChange = this.handleBookChange.bind(this);

Answer 1

听起来这堂课正在试图教你如何理解this在JavaScript类中的使用和作用域。使用React，您也可以执行以下操作：

class BooksApp extends React.Component {
  state = {
    name: this.props.name // sample value
  };

  handleBookChange = event => {
     // do stuff 
     // Arrow functions do not have their own 'this' so a bind is unnecessary. 
     // The 'this' in this method is at the class level.
  };

  render = () => {
    const { name } = this.state;
    return <div>
     <h1>{ name }</h1>
     <button onClick={this.handleBookChange} />
    </div>
  }
}

Answer 2

箭头函数是自绑定的，这意味着如果您在类中编写箭头函数，则不需要在类构造函数中绑定this，并且在任何需要该函数的地方this ;因此您的代码必须是这样的：

Class BookApp extends React.Components {
    handleBookChange= () => {
        // your function logic implement here
    }
}

为什么会这样？箭头函数中的此关键字引用其上下文，即BookApp，这就是我们想要的！您也可以在不使用类的情况下实现此代码。您不再需要this。

Answer 3

为了使用提案class-properties，我们需要使用babel转换代码。

这将不需要手动将this绑定到我们类的每个方法。

class BooksApp extends React.Component {
  constructor(props) {
    super(props);
  }

  handleBookChange = () => {}
}

Answer 4

如果您不希望维护组件的状态，则可以尝试使用这种简单的功能组件

const BookApp = (props) => {
   const handleBookChange = (e) => {
   }

   return (<div>
             Functional Component 
            <button onClick={handleBookChange}></button>
           </div>
          );
}

Answer 5

这个问题看起来有点模棱两可。但是，我相信很可能是要避免使用绑定词。

基本上（我正在使用此模式和工作方法）：

   class BooksApp extends React.Component {
       constructor(props) {
       super(props);
       this.handleBookChange = ( your params ) => {
                           your function code
                     };

如果我的内存可用，要启用此模式，我必须在Webpack中添加它（您的配置文件中可能需要类似的东西）：

{ test: /\.jsx?$/, loader: 'babel-loader', include: /ui/, query: { presets: ['es2015', 'stage-0', 'react'] } },

我喜欢这种模式的原因是让我想起了“这个”这个词，它是React类的一部分，因为我们可以声明不属于任何类的函数。

使用ES6类箭头功能

5 个答案: