The problem of getting the value after adding the input box dynamically to react

problem description


after iterating through the input box, I want to get the value of the array input box
the data structure is as follows: addItemList: [{deparment:"",types:"",money:""}]. When I join the input change event, I cannot enter the value in the input box, nor can I print the correct value

.

the environmental background of the problems and what methods you have tried

onInputchange= (fileds) = > (e) = > {
this.setState ({[fileds]: e.target.value});

}

related codes 

addItemList.map((item,index)=><div key={index}>
                              <span>:</span><Input className={s.inW} value={item.deparment} onChange={this.onInputchange(item)}></Input>
                              <span>:</span><Input className={s.inW} value={item.types} onChange={this.onInputchange(item)}></Input>
                             <span>:</span><Input className={s.inW2} value={item.money} onChange={this.onInputchange(item)}></Input>
                            <span onClick={()=>{this.deleteItem(index)}}></span>
                            </div>

expect to get the value of input array. If you have any answers, thank you very much.

Javascript
May.15,2022 


:addItemList:[{deparment:'',types:'',money:''}]


render:


addItemList.map((item,index)=><div key={index}>
                              <span>:</span><Input className={s.inW} value={item.deparment} onChange={this.onInputchange('deparment',index)}></Input>
                            <span>:</span><Input className={s.inW} value={item.types} onChange={this.onInputchange('types',index)}></Input>
                          <span>:</span><Input className={s.inW2} value={item.money} onChange={this.onInputchange('money',index)}></Input>
                          <span onClick={()=>{this.deleteItem(index)}}></span>
                            </div>)


 method: `onInputchange= (types,index) = > (e) = > {
 let arr = this.state.addItemList; 
 arrindex = e.target.value 
 this.setState ({addItemList: [... arr]}); 
} 


 - Note that this.setState ({addItemList:arr}) cannot be used to update data directly; otherwise, the view will not be updated  *  *

Previous: Laravel,linux,xshell executes the crontab scheduled task, and the scheduled task log executes normally, but the log write in laravel is not performed.

Next: Front end about dealing with URL

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu