如何使通过 useState 钩子改变状态的函数可重用？答案

【问题标题】：How to make functions that change the state via useState hook reusable?如何使通过 useState 钩子改变状态的函数可重用？
【发布时间】：2020-02-05 10:00:40
【问题描述】：

假设我有以下代码用于更改输入值并更新组件的状态：

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)}

或者有没有更好的处理方法？

【问题讨论】：

不会因为那个而尖叫jsx-no-bind吗？
@tanmay 可以详细说明吗？
jsx-no-bind eslint 规则将使用您提到的方法触发。虽然，我自己没有看到更好的方法。在这里本身:)

标签： javascript reactjs react-hooks reusability

【解决方案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
  }
}

【讨论】：

对此不太清楚.. 如果我需要使用useCustomHook 的组件的其他部分中的输入状态怎么办？例如。当通过handleInputChange() 更改输入时，新输入的状态将反映在另一个同级组件中。
你可以把它添加到那个钩子的响应对象中。

【解决方案2】：

您可以使用 on change function 属性创建一个全新的可重用组件。

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;

一般来说，我宁愿创建一个包含一些功能的新组件，而不是仅重用函数。

【讨论】：