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;

通常，我宁愿创建一个内部具有某些功能的新组件，而不是仅重用功能。

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

2 个答案: