Hooks是另一种方式。

使用自定义钩子，您可以轻松地在组件之间重用状态相关处理程序。

// hooks.js
const { useState } from 'react';

const useHandleChange = () => {
  const [formValues, setFormValues] = useState({});

  const handleChange = (e) => {
    let { type, checked, name, value} = e.target;
    value = type === 'checkbox' ? checked : value;

    setFormValues({
      [name]: value
    });
  };

  return { formValues, handleChange };
}

// Component.js
import useHandleChange from './hooks';

const LoginForm = () => {
  // you can use that on each component that needs the handleChange function
  const { formValues, handleChange } = useHandleChange();

  return (
    // html template
  );
};

您需要将您的组件转换为函数 component，但因此只有在不需要太多努力来重构您的代码时，我才会提出此解决方案。Hooks 不适用于类组件。

当然。您正在寻找的是所谓的高阶组件

您可以使用需要共享的所有方法/逻辑创建一个 HOC，并用它包装您需要增强的组件。

您当然可以创建一个辅助函数。但是，setState()在保存状态的组件中包含您的内容是很好的。

为此，您可以执行以下操作：

// utils.js helper function
handleCheckbox(e) {
  const target = e.target,
        value = target.type === 'checkbox' ? target.checked : target.value;
  return {name: target.name, value: value};
}


// In your component
handleChange(e) {
  // Destructured in case you need to handle it differently
  const { name, value } = handleCheckbox(e);
  this.setState({[name]: value});
}

助手可以通过{[name]: value}，但它不一定要关心变量最终是如何使用的。

例如utils.js，我想只需创建新文件并从中导出您的函数，如下所示

const handleChange = (e) => {
        const target = e.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        return { [name]: value }
}

export.handler = handleChange;

而不是将其导入到您的文件中，例如像这样：

const utils = require('path/to/file');

setState(utils.handleChange(e));

快乐编码！