如何在没有构造函数的情况下将 React 组件的函数绑定到“this”？答案

【问题标题】：How to bind a function of a React component to "this" without a constructor?如何在没有构造函数的情况下将 React 组件的函数绑定到“this”？
【发布时间】：2019-02-14 04:00:42
【问题描述】：

众所周知，this.someFunction = this.someFunction.bind(this) 可用于 React 类组件。但是，有时为非常简单的组件创建类很麻烦。那么，如何在不创建类的情况下将函数绑定到this？

【问题讨论】：

你可以使用 es6 arrow function。不需要为此绑定这个
如果您有一个简单的组件，您如何/为什么在组件内引用this？纯功能组件通常用于演示，并且应该具有它们需要作为道具传递的任何值，访问this 的要求是什么

标签： javascript reactjs

【解决方案1】：

使用箭头函数arrow function

【讨论】：

你的答案是正确的，但我建议你用一个例子详细说明一下，这将为将来遇到这个问题的读者增加一些价值。

【解决方案2】：

在 React 16.8 中，您可以将 hooks 用于有状态组件，本质上允许您将所有内容编写为函数并消除使用类的需要以及它们附带的所有警告（this、.bind() 等)。

使用示例

这是一个在函数中使用useState() hook 和useEffect() hook 的示例，以及已经绑定到组件上下文的箭头函数：

import React, { useState, useEffect } from 'react';

function LimitedTextarea({ rows, cols, value, limit }) {
  const [content, setContent] = useState(value);

  const setFormattedContent = text => {
    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
  };

  useEffect(() => {
    setFormattedContent(content);
  }, []);

  return (
    <div>
      <textarea
        rows={rows}
        cols={cols}
        onChange={event => setFormattedContent(event.target.value)}
        value={content}
      />
      <p>
        {content.length}/{limit}
      </p>
    </div>
  );
}

简短说明

您使用useState() 创建状态变量content 和更新该变量的方法setContent()。
您创建箭头函数setFormattedContent 以通过setContent 方法更新content 状态变量，该方法已绑定到上下文。
您使用useEffect() 对content 状态变量的值调用setFormattedContent。
最后，在类组件中返回 render() 方法中的任何内容。

【讨论】：

【解决方案3】：

this 在类组件中有意义，因为它引用组件实例。它在函数式组件中没有意义，因为它要么是 undefined 要么是全局的，具体取决于环境和函数的声明方式。

对于类组件，如果不需要显式构造函数可以省略，class fields可以用于分配实例属性，包括绑定方法：

class Foo extends Component {
  foo = this.foo.bind(this);

  foo() { ... }
  ...
}

什么是语法糖：

class Foo extends Component {

  constructor(props) {
    super(props);
    this.foo = this.foo.bind(this);
  }

  foo() { ... }
  ...
}

绑定的原型方法具有several benefits 实例箭头方法。

【讨论】：

【解决方案4】：

是的箭头功能是解决方案。

与此绑定，

this.someFunction = this.someFunction.bind(this)

使用箭头函数，

someFunction = () => {
   // do something
}

【讨论】：

【解决方案5】：

如果使用箭头功能，则无需绑定“this”。它的语法简单明了。

someFuncton = () => {
    // whatever write here...
}

【讨论】：