依赖升级后如何在Blur事件中传递值给amountOnBlur函数

我在依赖项升级重构价格设置/格式化代码时遇到了类型不匹配的问题：表单输入框的onBlur事件只能接受类型为e: (FocusEvent & {target: HTMLInputElement | HTMLTextAreaElement})的参数，但我需要调用的amountOnBlur函数最终需要接收一个包含输入值的对象，不知道如何正确传递值。

现有amountOnBlur函数代码 #

export const amountOnBlur =
  ({
     setAmount,
     currencyFormatting,
     paymentMethods,
     setPaymentMethod,
     setUserAmount,
     setError,
   }: {
    setAmount: Setter;
    currencyFormatting: CurrencyFormatting;
    paymentMethods: VendorPaymentMethod;
    setUserAmount: Setter;
    setPaymentMethod: Setter;
    setError: Setter;
  }) =>
    ({ value }: { value: string }): void => {
      const amount = formatValueAsCurrency(value, '', currencyFormatting);
      const { decimalPlaces, maxDp } = currencyFormatting;
      const userAmount = formatValueAsCurrency(value, '', {
        comma: false,
        decimalPlaces,
        maxDp,
      });

      setUserAmount(userAmount);
      setAmount(amount);

      const error = validAmountCurrency(value, currencyFormatting)
        ? ''
        : ERROR_POSITIVE_ONLY;

      setError(error);
      setDefaultPaymentMethod(paymentMethods, value, setPaymentMethod);
    };

我当前的UI端代码（存在问题） #

// 如何从onChangeReference中传递值给amountOnBlur？
const onChangeReference = (e: (FocusEvent & {target: HTMLInputElement | HTMLTextAreaElement})) => {
      const value = e.target.value
      amountOnBlur({
          currencyFormatting,
          paymentMethods,
          setAmount,
          setError,
          setPaymentMethod,
          setUserAmount,
      })
};
return (
  <IField
    error={error}
    inline
    inputGroup
    join
    label="Amount"
    rangeUnderflow={ERROR_MIN_VALUE}
  >
    <IInput
      data-testid="amount-currency"
      name="amount"
      onBlur={onChangeReference} //因类型不匹配无法直接使用amountOnBlur
      onFocus={displayUserValue(userAmount, setAmount)}
      required
      type={IInput.Type.Text}
      value={amount}
    >
      <span slot="append">{currency}</span>
    </IInput>
  </IField>
);

解决方案 #

问题出在amountOnBlur是一个高阶函数：它先接收配置参数（setAmount、currencyFormatting等），返回一个真正处理业务逻辑的函数，这个返回的函数需要接收{ value: string }类型的参数。

你只需要在onChangeReference中，调用amountOnBlur(配置)返回的函数，并传入包含输入值的对象即可：

const onChangeReference = (e: (FocusEvent & {target: HTMLInputElement | HTMLTextAreaElement})) => {
    const value = e.target.value;
    // 调用amountOnBlur获取处理函数，再传入value
    amountOnBlur({
        currencyFormatting,
        paymentMethods,
        setAmount,
        setError,
        setPaymentMethod,
        setUserAmount,
    })({ value }); // 这里传入value对象
};

或者你可以直接简化onBlur的写法，不需要额外的onChangeReference函数：

<IInput
  // ...其他属性
  onBlur={(e) => {
    amountOnBlur({
        currencyFormatting,
        paymentMethods,
        setAmount,
        setError,
        setPaymentMethod,
        setUserAmount,
    })({ value: e.target.value });
  }}
>

这样就能满足onBlur的参数类型要求，同时把输入值正确传递给amountOnBlur的处理逻辑。

内容的提问来源于stack exchange，提问作者Lenny Kamande