如何使通过 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) => {&nbsp; const [input, setInput] = useState(initialValue);&nbsp; // ...&nbsp; const handleInputChange = e => {&nbsp; &nbsp; let value = e.target.value;&nbsp; &nbsp; let name = e.target.name;&nbsp; &nbsp; let type = e.target.type;&nbsp; &nbsp; // some other code&nbsp; &nbsp; setInput(nextState);&nbsp; };&nbsp; return handleInputChange;}这input将绑定到调用useCustomHook.编辑：将@Shota 的回答与此相结合，您可以使用useState钩子创建一个组件来在内部处理状态：const CustomInput(initialState) => {&nbsp; const [input, setInput] = useState(initialValue);&nbsp; const handleInputChange = e => {&nbsp; &nbsp; // ...&nbsp; &nbsp; setInput(nextState);&nbsp; };&nbsp; return (<input type="text" onChange={handleInputChange} />);}&nbsp;要input在外部世界中使用，只需从钩子中返回它：useCustomHook = () => {&nbsp; // ...&nbsp; return {&nbsp; &nbsp; handleInputChange,&nbsp; &nbsp; input&nbsp; }}

Answer 2

您可以使用 on change 功能道具创建一个全新的可重用组件。import React from 'react';const CommonInput = ({handleChange}) => {&nbsp; const handleInputChange = e => {&nbsp; &nbsp; let value = e.target.value;&nbsp; &nbsp; let name = e.target.name;&nbsp; &nbsp; let type = e.target.type;&nbsp; &nbsp; // some other code&nbsp; &nbsp; setInput(nextState);&nbsp; &nbsp; handleChange(nextState);&nbsp; };&nbsp; return (<input type="text" onChange={handleInputChange} />);}export default CommonInput;我们可以在任何我们想要的地方重用它：import React from 'react';const Parent = (props) => (&nbsp; <CommonInput handleChange={nextStateData => {}}/>&nbsp; );export default Parent;一般来说，我更喜欢创建一个包含一些功能的新组件，而不是只重用函数。