从 ReactJS 中的导入函数更改 class 状态

Question

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

我有 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 代码所示），我需要通过此方法更新 class 状态。

这可能吗？我是 React 的新手，所以我可能会以完全错误的方式解决这个问题。

提前致谢！

Answer 1

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

onChange.bind(this)

Answer 2

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

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

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

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

从 ReactJS 中的导入函数更改 class 状态

Changing class state from an imported function in ReactJS

javascript

ecmascript-6

reactjs

arrow-functions