从 ReactJS 中的导入函数更改类状态答案

【问题标题】：Changing class state from an imported function in ReactJS从 ReactJS 中的导入函数更改类状态
【发布时间】：2019-10-15 08:15:05
【问题描述】：

我正在尝试从导入的命名组件更改类的状态，因此我只需要编写一次代码。这甚至可能吗？

我有 3 个文件（登录、忘记密码、注册）。在所有这些文件中，我正在侦听输入字段上的“onChange”事件，它们都执行相同的操作，如下所示：

onChange方法：

onChange = (e) => {
    this.setState(() => ({ errors: {} }));

    let fields = this.state.fields;
    fields[e.target.name] = e.target.value;
    this.setState(() => {
        return {
            fields
        }
    });
};

我真的很想将此作为命名方法以及其他一些已经在工作的方法导入：

import { onFocus, onBlur, onChange } from './Utils/Input';

问题是（如上面 onChange 代码中所见），我需要从此方法更新类状态。

这有可能吗？我对 React 很陌生，所以我可能会以完全错误的方式处理这个问题。

提前谢谢你！

【问题讨论】：

你可以通过this.

标签： javascript reactjs ecmascript-6 arrow-functions

【解决方案1】：

当尝试更新组件的状态时，您总是在更新与特定 this 相关的状态。

您正在尝试编写独立于您正在使用的实例的函数。所以在里面使用“this”是没有意义的。

您可以像这样将 Class 的实例传递给 on-function：

https://codesandbox.io/s/focused-cache-zzfvp

【讨论】：

谢谢！完全有道理！欣赏！

【解决方案2】：

通过像这样从类内部将上下文绑定到该方法来使用该方法

onChange.bind(this)

【讨论】：