Реагировать на метод совместного использования компонентов

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 работает правильно?

У меня есть некоторые грубые идеи о том, как go об этом (например, тот, что выше), но я хочу выбрать лучший подход к этому. Спасибо!

Answer 1

Захваты - это еще один способ go.

С помощью пользовательских хуков вы можете легко использовать зависимые от состояния обработчики между компонентами.

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

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

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

    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

Конечно. То, что вы ищете, называется Компоненты высшего порядка

Вы можете создать HO C со всеми методами / логами c, которые вам нужны, и обернуть компоненты вам нужно улучшить его.

Answer 3

Полагаю, просто создайте новый файл, например 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));

счастливой кодировки!

Answer 4

Вы, конечно, можете создать вспомогательную функцию. Тем не менее, хорошо иметь ваш 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}, но это не обязательно должно касаться того, как переменные наконец используются.