文享日志

React监听Input输入传参问题

React

发表于2019年03月29日12:16:13

更新于2019年03月29日12:45:13

0条评论 242次阅读

问题引出:

  工作中遇到这样一个问题。一个组件中一个数组列表数据,渲染出多个input输入框,用户输入的值要放到这个数组项的对象上。监听用户输入的onchange事件默认接受一个参数为event,并且获取输入值必须要使用 event才能获取,那么怎样才能传递一些信息,将用户输入的值更新到数组列表中呢?


示例代码:

 const list = [{key: '测试', value: ''}, {key: '测试二', value: ''}, {key: '测试三', value: ''}]
 
 function dealInput (event) {
  console.log(event.target.value)    // 只有通过 event 才能获得输入框输入的值
 }
 
 // 编辑器不支持 JSX 请自行脑补尖括号
 list.map(n => div { n.key } Input onChange={dealInput} /div) )

怎样才能将输入框输入的值更新到 list 中的对应项上?


问题解决:

既然只能传递默认的 event 参数,那我们只能从 event 上下手。 将所需要的数据挂载到 event 参数中,在 dealInput 函数中获取即可。


说来容易,代码应该怎么改造呢?


观察 

event.target.value

是否有些灵感呢?


event.target 是输入框 DOM 元素, 所以可以将一些信息挂载到 输入框DOM上


具体代码如下:

 const list = [{key: '测试', value: ''}, {key: '测试二', value: ''}, {key: '测试三', value: ''}]
 
 function dealInput (e) {
  console.log(e.target.value)
  console.log(e.target.dataset.value)
 }
 
 list.map((n, i) => div { n.key } Input onChange={dealInput} data-value={JSON.stringify({position:i})} /div))

使用 data-属性将当前的位置信息保存。(这里注意最好不要使用 自定义属性 , 因为自定义属性并没有挂载到 JS DOM 树上,所以在 Input 上挂载的属性不能更新到 DOM 上。)


使用自定义属性时,要使用下面这种方法获取值

 function dealInput (n) {
  console.log(n.target.attributes.temp)
 }

获取到的是一个 HTML 属性

类型可以使用

Object.prototype.toString.call(n.target.attributes.temp)

获取,可以看到是 [object Attr]   ( ps: 头一次见这种类型的 )


取值的话,只能先转成字符串,再从字符串中获取了。。


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广