如何在 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 => {&nbsp; &nbsp; switch (type) {&nbsp; &nbsp; &nbsp; &nbsp; case 'email':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const email = event.target.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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,}))$/;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (!re.test(email)) && console.log("Please enter a valid email address");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; }}在你的输入标签中，你可以像这样使用它<input onChange={handleChange} onBlur={createValidator('email')} />