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

Question

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

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

我认为将处理程序函数添加到数据数组是某种 ok， 特别是如果它只是一个小项目。至少它似乎并不少见。

但如果你更喜欢更严格地遵循数据和逻辑分离的原则（和我一样）， 那么你不应该将函数添加到数据数组，而应该只添加标识什么是有效的“东西”。

另外，请注意，如果您在数据数组中使用函数，则数据数组不能 stringified，如果这对您很重要（例如，通过网络、工作人员、存储等传递它）。

如果需求变得更复杂，需求的标识符不能再是简单的键（如"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>
  )
}