Question

我在项目中构造了一个简单的钩子，以便重新使用表单字段。

我要做什么：
找出一种将参数自动传递给回调函数数组的函数引用的方法

如果只考虑一个参数，这很简单。考虑以下功能：

checkMinValue = (input: number) => input > 42 ? '' : `Must be bigger than 42`

和钩子按以下方式定义

import { useState, ChangeEvent } from 'react'

type Field = {
  value: any,
  errors: string[],
}

type CheckFunction = (...args: any[]) => string

const invokeMap = (input: any, checkFunctions: CheckFunction[]) => (
   checkFunctions.map(callback => callback(input)).filter(e => e !== '')
)

const useField = (value: any, checkFunctions: CheckFunction[]) => {
  const initialValue: Field = {
    value,
    errors: invokeMap(value, checkFunctions),
  }
  const [field, setField] = useState<Field>(initialValue)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setField({
      value,
      errors: invokeMap(value, checkFunctions)
    })
  }

  return [field, handleChange]
}

因此，在实际代码中，您将拥有类似的东西

const [age, handleAgeChange] = useField(12, [checkMinValue])

上面的代码片段就像一个符（虽然在实际代码中显然很健壮，但这足以画出图片）

出现问题的地方
我无法找到一种方法可以以某种方式将参数传递给函数引用。

因此，假设我想使自己的checkMinValue函数更加动态。

checkMinValue = (input: number, min: number) => input >= min ? '' : `Must be bigger than ${min}`

问题是，我不能再简单地传递参数了，因为这只会引起调用，

例如useField(8, [checkMinValue('//... nothign to pass here, 8)])显然是胡说八道。

我当时想考虑使用它，并且只传递函数引用，但这使我不得不根据需要多少个参数将自己基本上限制为x咖喱量。而且，为每个函数声明一个单独的curry实际上比在声明事件处理程序和开始而不是使用钩子的东西更多的是浪费时间。

有什么办法可以合理地解决这个问题吗？或者只是不可能？

Answer 1

您可以编写一个带有输入参数并返回一个函数的函数。对于您的示例，您可以执行以下操作：

checkMinValue = (min) => (input: number) => input >= min ? '' : `Must be bigger than ${min}`

现在，当您调用checkMinValue（8）时，它将返回一个可以传递的函数。

您可以将参数传递给回调引用吗？

1 个答案: