可以在反应组件之外使用handleChange function 吗？

Question

我正在使用一个简单的无状态 function 作为带有反应钩子 state 的反应组件。 另外，如果 function 变得更大一点，我还想将每个 function 放在一个单独的地方，以使测试更容易并使代码更具可读性。

所以在这个例子中， handleChange function 应该做的更多，然后只是设置 state 值。 但是如果我把它放在 function 之外，我就无法访问setMessage function 和组件的 props。

这无论如何有用还是错误的反应方式？

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

这使 function 与反应完全分离。

在函数内部嵌套函数看起来不太好。 如果你喜欢功能方法，你可以 pipe 他们

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

在哪里

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

Answer 2

我可以看到并同意将逻辑与组件分开可能有利于测试（尽管有时测试组件本身也很有价值，因此这无论如何都不是硬性规则）。

就您而言，我认为您正试图将这条线与 React 划清界限。 我的建议是在组件内部仍然有“handleChange”，但在组件外部创建一个新的 function 来处理您要隔离的逻辑并返回要在最后设置的消息。 这个 function 可以把 props 作为参数。 So your handleChange function would take the relevant props and pass them as arguments to this function, then call setMessage with the return value of your function. 现在您有了可以测试的纯输入/输出 function。