react 动态添加input框后获取值的问题

Question

问题描述

循环遍历input框后想获取数组input框的值
数据结构是这样的： addItemList:[{deparment:'',types:'',money:''}],当我加入input change事件后无法在输入框里输入值，同样不能打印出正确的值

问题出现的环境背景及自己尝试过哪些方法

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

}

相关代码

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>

期望能获取input数组的值 如有解答者 将十分感谢

Answer 1

数据结构类型：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>)

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

- 注意点 数据更新不能直接用 this.setState({addItemList:arr}); 否则视图不更新**

Answer 2

addItemList.map((item,index) => <div key={index}>
                                        <span>服务部门：</span><Input className={s.inW} value={item.deparment} onChange={this.onInputchange(item, 'deparment')}></Input>
                                        <span>费用类型：</span><Input className={s.inW} value={item.types} onChange={this.onInputchange(item, 'types')}></Input>
                                        <span>金额：</span><Input className={s.inW2} value={item.money} onChange={this.onInputchange(item, 'money')}></Input>
                                        <span onClick={()=>{this.deleteItem(index)}}>删除</span>
                                      </div>
onInputchange=(item, fileds)=>(e)=>{
    this.setState({ item[fileds]: e.target.value });
}

Answer 3

你需要修改的应该是item

onInputchange = (fileds, e) => {
  let { item } = this.state;
  item[fileds] = e.target.value;
  this.setState({item});
}

<Input className={s.inW2} value={item.money} onChange={this.onInputchange.bind(this,'money')}></Input>

可以使用bind方法来绑定第一个参数

Answer 4

render内部：

<div key={index}>
    <span>服务部门：</span><Input className={s.inW2}  value={item.deparment} onChange={this.onInputchange(index)}></Input>
</div>

JS部分：

onInputchange = (i) => (e) => {
    let obj = this.state.addItemList
    switch(e.target.previousElementSibling.innerHTML) {
      case '服务部门：': obj[i].deparment = e.target.value; break
      case '费用类型：': obj[i].types = e.target.value; break
      case '金额：': obj[i].money = e.target.value; break
    }
    this.setState({
      addItemList: obj
    })
  }