如何解决在OnChange输入中传递参数对象以实现功能组件的反应
我试图将对象从子组件Onchange传递给ParentComponent。
我没有作为多个参数传递,而是作为一个对象传递。
需要执行Onchange验证
const objArray = [
{
Name: 'TextBox1',IsMandatory: true,TextEntryType: 'TextEntryType',ModelFrom: 'BillingAddress'
},{
Name: 'TextBox2',IsMandatory: false,{
Name: 'TextBox3',{
Name: 'TextBox4',TextEntryType: 'SelectEntryType',]
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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。