如何使通过 useState 钩子更改状态的函数可重用?

Question

假设我有以下代码来更改输入值，它会更新组件的状态：

const handleInputChange = e => {
let value = e.target.value;
let name = e.target.name;
let type = e.target.type;
// some other code
setInput(nextState);
};

但是，由于我有不同的组件使用相同的函数，因此我想使其成为可导出的实用程序函数。但是它有来自useState钩子的"setInput"函数调用。

我是否应该将setInput作为参数传递给每个handleInputChange()调用，例如：

onChange={e => handleInputChange(e, setInput)}

还是有更好的处理方法？

Answer 1

如果你正在创建自定义钩子，你可以在那里调用其他钩子。因此，您可以在钩子中检索setInput，而不是将其传递到那里：

const useCustomHook = (initialValue) => {
const [input, setInput] = useState(initialValue);
// ...
const handleInputChange = e => {
let value = e.target.value;
let name = e.target.name;
let type = e.target.type;
// some other code
setInput(nextState);
};
return handleInputChange;
}

此input将绑定到组件的状态，该组件正在调用useCustomHook。

编辑：

将@Shota的答案与这个答案结合起来，您可以使用useState钩子创建一个组件来内部处理状态：

const CustomInput(initialState) => {
const [input, setInput] = useState(initialValue);
const handleInputChange = e => {
// ...
setInput(nextState);
};
return (<input type="text" onChange={handleInputChange} />);
} 

要在外部世界中使用input，只需从钩子中返回它：

useCustomHook = () => {
// ...
return {
handleInputChange,
input
}
}

Answer 2

您可以使用更改函数属性创建一个全新的可重用组件。

import React from 'react';
const CommonInput = ({handleChange}) => {
const handleInputChange = e => {
let value = e.target.value;
let name = e.target.name;
let type = e.target.type;
// some other code
setInput(nextState);
handleChange(nextState);
};
return (<input type="text" onChange={handleInputChange} />);
}
export default CommonInput;

我们可以在任何地方重用它：

import React from 'react';
const Parent = (props) => (
<CommonInput handleChange={nextStateData => {}}/>
);
export default Parent;

通常，我更喜欢创建一个包含某些功能的新组件，而不是仅重用函数。