如何在从对象数组创建的可重用React组件中添加事件处理程序

Question

我正在尝试为动态地址表单创建可重复使用的组件。我需要向这些组件添加自定义事件处理程序。目前，Address表单中的每个输入字段都是从以下对象数组创建的，我可以向以下数组添加自定义事件处理程序吗？或者我需要考虑其他方法来实现这些功能吗。

AddressFields.js

export const AddressFields =[
{name:"FirstName", type:"text", title:"First Name", id:"AddressFirst" ,validate:(data)=>isNaN(data)},
{name:"LastName", type:"text", title:"Last Name", id:"AddressLast",validate:(data)=>isNaN(data)},
{name:"AddressLine1", type:"text", title:"Address Line 1", id:"Address1",validate:(data)=>isNaN(data)},
{name:"AddressLine2", type:"text", title:"Address Line 2", id:"Address2",validate:(data)=>isNaN(data)},
{name:"City", type:"text", title:"City", id:"AddressCity",validate:(data)=>isNaN(data)},
{name:"Pin", type:"number", title:"Pin Code", id:"AddressPin",validate:(data)=>isNaN(data)},
{name:"State", type:"text", title:"State", id:"AddressState",validate:(data)=>isNaN(data)},
{name:"Phone", type:"number", title:"Phone ", id:"AddressPhone",validate:(data)=>isNaN(data)},
{name:"Email", type:"email", title:"Email ", id:"AddressEmail",validate:(data)=>isNaN(data)},];

AddressForm.js

import Input from "../UI/Input"
import { AddressFields } from "./AddressFields"
const AddressForm = () => {
return (
<div id="ShippingAddress" className="">
{AddressFields.map((addr)=>{
return <Input name={addr.name} id={addr.id} title={addr.title} type={addr.type}/>
})}
</div>
)
}
export default AddressForm

Input.js

import { useState } from "react";
const Input = (props) => {
const [isValid,setIsValid]=useState(true);
return (
<div>
<label for={props.name}>{props.title}</label>
<input id={props.id} name={props.name} type={props.type} onBlur={isValid=props.validate()} />

</div>
)
}
export default Input

Answer 1

我认为将处理程序函数添加到数据数组中是的一种好的，尤其是如果它只是一个小项目。至少这似乎并不罕见。

但是，如果您更愿意更严格地遵循数据和逻辑分离的原则(就像我所做的那样(，那么您不应该向数据数组中添加函数，而应该只添加标识有效内容的"something"。

此外，请注意，如果在数据数组内部使用函数，则数据数组不能字符串化，如果这对您很重要(例如，通过网络、工作人员、存储…传递它(。

如果需求变得更加复杂，则需求的标识符不能再是简单的密钥(如"isNaN"(，但您需要某种自定义的"语法"，例如"shouldBeBetween:10,99"，需要对其进行解析。

如果它变得非常复杂，我想它应该被认为是为了简单起见(如果不需要stringify(，或者使用支持所需验证的库。

分离数据和逻辑的示例

(为此，您需要提前了解所有可能的验证器(

export const AddressFields = [
{
name: "FirstName",
...,
validate: [
'isNaN',   // <-- some 'key' to identify the requirement
...       // <-- optionally more additional requirements
]
},
];

然后你会有一些所有可能的验证器的集合，例如：

const validators = {
isNaN: ( data ) => isNaN( data ),
// ... more additional validators
};

对于每个输入，您将创建并调用所需的验证器，例如：

const createValidator = function( validatorKeys ){
return function( data ){
return validatorKeys.every( key => {
const currentValidator = validators.hasOwnProperty( key ) && validators[ key ];
return currentValidator && currentValidator( data );
})
}
}
const Input = (props) => {
const [ isValid, setIsValid ] = useState( true );
const [ value, setValue ] = useState();
const validatorForThisItem = createValidator( props.validate );
return (
<div>
<label for={ props.name }>{ props.title }</label>
<input id={ props.id } name={ props.name } type={ props.type } onBlur={ () => {
setIsValid( validatorForThisItem( value ) );
}} />
</div>
)
}