如何使通过 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

您可以使用 on change 功能道具创建一个全新的可重用组件。

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;

一般来说，我更喜欢创建一个包含一些功能的新组件，而不是只重用函数。