在功能组件反应的 OnChange 输入中传递参数对象

Question

我正在尝试将对象从子组件 Onchange 传递到 ParentComponent。我没有作为多个参数传递，而是作为对象传递。
需要执行Onchange验证

const objArray = [
    {
        Name: 'TextBox1',
        IsMandatory: true,
        TextEntryType: 'TextEntryType',
        ModelFrom: 'BillingAddress'
    }, {
        Name: 'TextBox2',
        IsMandatory: false,
        TextEntryType: 'TextEntryType',
        ModelFrom: 'BillingAddress'
    }, {
        Name: 'TextBox3',
        IsMandatory: true,
        TextEntryType: 'TextEntryType',
        ModelFrom: 'BillingAddress'
    }, {
        Name: 'TextBox4',
        IsMandatory: false,
        TextEntryType: 'SelectEntryType',
        ModelFrom: 'BillingAddress'
    },
]
const reducer = (state, action) =>{
    
        switch (action.type) {
            case 'FIRST_LOAD':
                return {
                    objArray:createFunction(action.payLoad.data)//this will create intial array of Object
                }
        }
}

const ParentContainer = ({ }) => {
    const [state, dispatch] = useReducer(reducer, initalState)
    
    const response = fetch('/Home/FIRST_LOAD', {
            method: 'GET',
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        }).then(res => res.json()).then(
            (result) => {
                dispatch({ type: 'FIRST_LOAD', payLoad: result })

            })
            
            
    if (state.Info != null) {
        return (
                <ChildContainer objArray={state.objArray}/>
            
            );
    }
    
    
    const eventOnChangeCallback =(obj)=>{
        //perform validation
        
    }
} 

const ChildContainer({ model,objArray ,eventOnChangeCallback }) => {
    
    
    //basically a form
    return <React.Fragment>
                        <input type="text" className="form-control" placeholder=" (Line 1)" value={model.Line1} name="Line1" onChange={e => eventOnChangeCallback(objArray.TextBox1, e.target.value)} />

                        {lstError.Line1.Value != '' ? <span className="startClose1 field-validation-error" style={error} >{lstError.Line1.Value}</span> : ''}
                        
                        
                          <input type="text" className="form-control" placeholder=" (Line 1)" value={model.Line1} name="Line1" onChange={e => eventOnChangeCallback(objArray.TextBox2, e.target.value)} />

                        {lstError.Line1.Value != '' ? <span className="startClose1 field-validation-error" style={error} >{lstError.Line1.Value}</span> : ''}
                        
                        
                        
                          <input type="text" className="form-control" placeholder=" (Line 1)" value={model.Line1} name="Line1" onChange={e => eventOnChangeCallback(objArray.TextBox3, e.target.value)} />

                        {lstError.Line1.Value != '' ? <span className="startClose1 field-validation-error" style={error} >{lstError.Line1.Value}</span> : ''}
     </React.Fragment>
}

当我作为单独的属性传递而不传递 Object 时，它工作正常如下图

onChange={e =>eventOnChangeCallback('TextBox1','false','textbox',e.target.value)} // NameOf 属性,isMandatory,TypeOfProperty

当我尝试做 Onchange 时我低于错误

未捕获类型错误：解构不可迭代实例的尝试无效

Answer 1

在子组件中使用它 onChange={e => eventOnChangeCallback({name: objArray.TextBox1, value:e.target.value})}

然后在父组件

const eventOnChangeCallback =(obj)=>{
      const { name, value } = obj;
      // perform your validation  
}

在功能组件反应的 OnChange 输入中传递参数对象

Pass argument object in OnChange input for functional component react

javascript

parameter-passing

reducers

reactjs