React跨组件共享方法

Question

到目前为止我有一个看起来像这样的组件：

import React from 'react';

// Import images
import logo from '../images/logo-small.png';

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

        this.state = {
            email: '',
            password: '',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

        this.setState({
            [name]: value
        });
    }

我将handleChange(e)在我的应用程序上的多个文件的多个组件中重复使用相同的方法。有没有办法可以分离出这个方法，而不必每次都重写它？

我是否可以输入handleChange(e)文件名utils.js并在每次需要使用该文件时导入该文件？如果是这样，我如何确保其this.setState正常工作？

我对如何解决这个问题有一些粗略的想法（例如上面的想法），但我想采取最好的方法。谢谢！

Answer 1

钩子是另一种方法。

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

// 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
  );
};

不过，您需要将组件转换为函数组件，因此仅当不需要太多精力来重构代码时，我才会提出此解决方案。Hooks 不适用于类组件。

Answer 2

当然。您正在寻找的称为高阶组件

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