javascript - 在功能组件反应的 OnChange 输入中传递参数对象
问题描述
我正在尝试将一个对象从子组件 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 时,出现以下错误
未捕获的 TypeError:无效的解构不可迭代实例的尝试
解决方案
在子组件中使用它
onChange={e => eventOnChangeCallback({name: objArray.TextBox1, value:e.target.value})}
然后在父组件中
const eventOnChangeCallback =(obj)=>{
const { name, value } = obj;
// perform your validation
}
推荐阅读
- node.js - Mongoose 连接让我在 openshift 中的随机触发器上出错
- python - 如何使用 Python 获取 PDF 文件的最后一行位置?
- github - 向包中添加示例时是否应该更新 semver 版本?
- node.js - Web3.js >> w3.eth.sendSignedTransaction txn 提交但不成功
- c# - 在不安装 Excel 的情况下运行 Excel 宏
- json - 使用 Codable 解析嵌套 JSON,如 ObjectMapper Swift 4
- java - 为什么eclipse编译shell javac或mvn的文件会报错:code too large?
- java - 在线程池Java中停止无限循环
- excel - 在没有 vbscript 的情况下转置 Excel 数据
- azure - 使用调用后提交表单数据的 Azure 逻辑应用