将简单的 React handleChange() 函数制作成高阶函数

Question

function CheckoutForm({ onSubmit }) {
  const [shippingName, setShippingName] = useState("");
  
  function handleChange(func, e) {
    return function () {
      return func.call(null, e.target.value);
    };
  }
  
  return (
    <form>
      <div className="field">
        <label htmlFor="shipping-username">이름</label>
        <input
          id="shipping-username"
          type="text"
          name="shipping-username"
          autoComplete="off"
          value={shippingName}
          // onChange={(e) => setShippingName(e.target.value)} <--- ORIGINAL METHOD
          onChange={handleChange(setShippingName(e.target.value), e)} <--- MY QUESTION
        />
      </div>
    </form>
  )
}

在制作简单的输入字段时，我很好奇是否可以创建更高阶的 handleChange 函数并将其重新用于其他输入。我知道有更好的方法使用计算属性名称，但只是出于好奇。

我从上面的代码得到的错误消息是 e 没有定义，我被困在这里。欢迎任何建议。

Answer 1

当您像这样定义 onChange 处理程序时：

onChange={handleChange(setShippingName(e.target.value), e)}

您正在将此 handleChange 调用的返回值指定为处理程序。因此，您必须将自己的值传递给 handleChange，因为它不会在事件期间被调用——此时不会定义 e。只有结果函数将从事件中接收 e。

因此您可以 re-define handleChange 将 e 作为内部函数的参数，如下所示：

  function handleChange(func) {
    return function (e) {
      return func.call(null, e.target.value);
    };
  }

再往下你可以跳过传递 e（无论如何都未定义）。而只是这样做：

onChange={handleChange(setShippingName)}

...但是，我认为您可以通过像这样内联定义您的处理程序来大大简化一切：

onChange={(e) => setShippingName(e.target.value)}

^^ 大家都是这样的

将简单的 React handleChange() 函数制作成高阶函数

Making simple React handleChange() function into Higher Order Function

javascript

higher-order-functions

reactjs