React获取属性问题，为什么用e.target.index获取到的是undefined?

Question

<div className="form-group">
  <label className="col-md-2 control-label">商品名称</label>
    <div className="col-md-5">
      <input type="text" className="form-control"  placeholder="输入商品名称"
             name="productName" value={this.state.name}
             onChange={(e)=>{this.onChange(e)}}/>
   </div>
</div>

onChange(e){
   console.log(e.target.value);
//这里如果用e.target.getAttribute('value')也可以获取到值  }

e.target:

 <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}>
</i>

    //删除图片
  onImageDelete(e){
    let delIndex=e.target.getAttribute('index'); 
    //这里如果用e.target.index获取的值是undefined，问题是：为什么这里不能用e.target.index获取呢？
    console.log(delIndex);
  }

e.target:

Answer 1

e.target获取到的是一个DOM元素。
DOM相关的操作分为两种：

1. Property
2. Attribute

Attribute表示的是<tag attr1 attr2>中的attr1、attr2，需要通过getAttribute来获取。
而Property则是一些DOM特殊的属性值，可以直接.XXX来获取。
常用的Property有：

1. className
2. htmlFor
3. style
4. value

对应的Attribute有：

1. class
2. for
3. style
4. value

这就解释了为什么target.value可以获取到而target.index获取不到，因为value是Property（只不过因为和Attribute重名，所以容易产生误解），而index不是，所以只能通过getAttribute来获取。