Input列表参数传递

引言

在React中，如果要获得 Input 等输入的内容，只能通过监听事件中的 event 对象获得，但如果想传递更多的信息，则会使用二层函数进行包装。类似这样: <Input onChange={e => this.onInput(e, sth)}>.但是在不知道参数 sth 传错的情况下，onInput 函数总接收 sth 为到 undefined 时，此时就只能另辟蹊径，在 event 对象上做文章了。

正文

先看在 React 中，怎么获得 Input 输入内容:

  <Input onChange={ this.onInput }>

  onInput = e => {
    const value = e.target.value
    ...
  }

那如果页面上有 n 个输入框，像下面这样

  const list = [{name: '苹果', value: ''}, {name: '橘子', value: ''}, {name: '梨', value: ''}]

  list.map(n => <div><span>{n.name}</span><Input onChange={ this.onInput }></div>)

  onInput = e => {
    const value = e.target.value
    ...
  }

怎么将输入框输入更新到对应的位置 ?

要在 event 上做文章的话，其实可以从获取输入值e.target.value找到解决思路，将要传递的参数挂载到 event.target对象上就可以了。先要看一下 event.target 对象是什么. event.target 是DOM节点。所以我们只需要在 Input 输入框中添加属性就可以了。像下面这样

  const list = [{name: '苹果', value: ''}, {name: '橘子', value: ''}, {name: '梨', value: ''}]

  list.map((n, idx) => <div><span>{n.name}</span><Input onChange={ this.onInput } data-position = {i}></div>)

  onInput = e => {
    const position = e.target.data.position
    list[position].value = e.target.value
  }

这里为什么用 data- 属性，是因为 data- 是js DOM树上的一个节点。

HTML 元素的自定义属性挂载到 DOM 的 attributes 属性中。需要使用 n.target.attributes 获取。

  n.target.attributes.sth

并且获得的值为字符串，需要截取字符串才能获得有效数据。

效果图

image