如何在 ReactJS 中创建动态函数名称并在 onBlur 上使用？

Question

我想使用其名称为连接字符串和变量的函数名称。验证包含函数名称：const validate='validate'+type.replace(/^./, type[0].toUpperCase());其中类型='电子邮件'const validateEmail = (e) => {email=e.target.value;//console.log(email);var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;{(!re.test(email)) && console.log("Please enter a valid email address");}}现在我想将此验证用作 onBlur 中的函数名称onBlur={validate}在<input onChange={handleChange} onBlur={validate} />警告：预期的onBlur侦听器是一个函数，而不是一个string类型的值。

Answer 1

你可以有一个像这样的通用函数，它接受类型作为输入并返回一个验证函数。

const createValidator = type => {

    switch (type) {

        case 'email':

            return (event) => {

                const email = event.target.value;

                const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                (!re.test(email)) && console.log("Please enter a valid email address");

            }

        default:

            return null;

    }

}

在你的输入标签中，你可以像这样使用它

<input onChange={handleChange} onBlur={createValidator('email')} />