Возможно ли использовать функцию handleChange за пределами реактивного компонента?

Question

Я использую простую функцию без сохранения состояния в качестве компонента реакции с состоянием реакции подключения. Также я хотел бы держать каждую функцию в отдельном месте, чтобы упростить тестирование и сделать код более читабельным, если функция становится немного больше.

Так что в этом примере функция handleChange должна сделать немного больше, чем просто установить значение состояния. Но если я поставлю его вне функции, у меня не будет доступа к функции setMessage и опорам компонента.

Это в любом случае полезно или неправильно реагирует?

пример. js

import React, { useState } from 'react'

export function handleChange (event) = {
    // do something...
    // how to get props?
    setMessage('new'); // is not defined at this place
}

export default function Message = (props) => {
    const [message, setMessage] = useState('');

    return (
        <input
            type="text"
            value={message}
            placeholder="Enter a message"
            onChange={handleChange}
        />
    );
};

Answer 1

Вы можете использовать карри для этого

export const handleChange = setState => event => {
  setState('new'); 
}

и в компоненте

export default function Message = (props) => {
const [message, setMessage] = useState('');
const reactOnChange = useCallback(handleChange(setMessage),[]);
return (
    <input
        type="text"
        value={message}
        placeholder="Enter a message"
        onChange={reactOnChange }
    />
  );
};

В качестве альтернативы:

export const handleChange = relevantData => {
  return 'new'; 
}


export default function Message = (props) => {
const [message, setMessage] = useState('');
return (
    <input
        type="text"
        value={message}
        placeholder="Enter a message"
        onChange={e => setMessage(handleChange(getRelevantDataFrom(e)))}
    />
  );
};

Это дает функции полное отделение от реагировать.

Вложение функций внутри функций выглядит не очень хорошо. Если вам нравится функциональный подход, вы можете передать их

   onChange={pipe(getRelevantDataFrom, handleChange, setMessage)}

где

const pipe = (...functions) => x => functions.reduce((acc, f) => f(acc), x)

Answer 2

Я могу видеть и согласен, что отделение вашей логики c от вашего компонента может быть полезным для тестирования (хотя иногда тестирование самого компонента также полезно, так как это не является жестким правилом каким-либо образом).

В вашем случае, я думаю, вы пытаетесь провести черту немного дальше от React. То, что я хотел бы предложить, это по-прежнему иметь «handleChange» внутри компонента, но создать новую функцию вне компонента, которая обрабатывает logi c, который вы хотите изолировать, и который возвращает сообщение для установки в конце. Эта функция может принимать реквизиты в качестве аргумента. Таким образом, ваша функция handleChange должна взять соответствующие реквизиты и передать их в качестве аргументов этой функции, а затем вызвать setMessage с возвращаемым значением вашей функции. Теперь у вас есть чистая функция ввода / вывода, которую вы можете проверить.