javascript - 如何在 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");}
}

现在我想使用这个validate作为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')} />