Reactjs 能否将参数传递给回调引用?
为了重用表单字段,我在项目中构建了一个简单的钩子 我想做什么:Reactjs 能否将参数传递给回调引用?,reactjs,typescript,react-hooks,Reactjs,Typescript,React Hooks,为了重用表单字段,我在项目中构建了一个简单的钩子 我想做什么: 找出一种方法,将参数自动传递给回调函数数组的函数引用 如果你只考虑一个论点,这是相当简单的。考虑以下功能: checkMinValue = (input: number) => input > 42 ? '' : `Must be bigger than 42` 钩子的定义如下 import { useState, ChangeEvent } from 'react' type Field = { value:
找出一种方法,将参数自动传递给回调函数数组的函数引用 如果你只考虑一个论点,这是相当简单的。考虑以下功能:
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]
}
上面的代码片段很有魅力(虽然在实际代码中它显然更健壮,但这应该足以描绘整个画面)
出现问题的地方:我想不出一种方法,能够以某种方式将参数传递给函数引用 假设我想让我的
checkMinValue
函数更具动态性
checkMinValue = (input: number, min: number) => input >= min ? '' : `Must be bigger than ${min}`
问题是,我不能再简单地传递参数,因为这只会导致调用
例如,useField(8,[checkMinValue('/..notign to pass here,8)])
显然是胡说八道
我想用咖喱做它,并且只传递函数引用,但这就留下了一个问题,我必须根据需要的参数数量,将自己的咖喱数量限制在x。为每个函数声明一个单独的curry实际上比简单地声明事件处理程序和开始的东西而不是使用钩子更浪费时间
有没有什么方法可以合理地实现这一点,或者说这是不可能的?您可以编写一个接受输入参数并返回函数的函数。例如,您可以执行以下操作:
checkMinValue = (min) => (input: number) => input >= min ? '' : `Must be bigger than ${min}`
现在,当您调用checkMinValue(8)时,它返回一个您可以传递的函数
checkMinValue = (min) => (input: number) => input >= min ? '' : `Must be bigger than ${min}`