react点击删除当前项，获取不到data-index属性？

Question

要实现功能，点击删除按钮会删除当前子组件，子组件放在数组中；计划是通过点击子组件删除对应数组中子组件的那一项，每个子组件的index={index}，点击后通过e.target.getAttribute("data-index")为啥获取不到index呢，结果是null。

import React, { Component } from 'react';
import './App.css';
import Add from './components/Add'
import Item from './components/Item'

class App extends Component {
  constructor() {
    super();
    this.state = {
        name: "",
        age: null,
        gender: "",
        infoList: []
    };
  }

  /*shouldComponentUpdate() {
    //alert("shouldComponentUpdate");
    return true;        // 记得要返回true
  }*/

  renderItem() {
    return <Item />;
  }

  changeList = (e) => {
    //let infoList = this.state.infoList;
    this.setState({
      //name:childState.name,
      //age:childState.age,
      //gender:childState.gender
    });
      //此处获取index
    console.log(e.target.parentNode.getAttribute("data-index"))
    //infoList.pop()
  }

  getChildInfo = (childState) => {
    let infoList = this.state.infoList;
    
    this.setState({
      //name:childState.name,
      //age:childState.age,
      //gender:childState.gender
    });
    infoList.push(childState)
  }

  render() {
    let infoList = this.state.infoList;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">A list for users</h1>
        </header>
        <p className="App-intro">
          请输入用户信息<code>src/App.js</code> 点击修改
        </p>
        此处为App父组件
        <p className="Add-show">
          姓名：{this.state.name} 
          年龄：{this.state.age} 
          性别：{this.state.gender}
        </p>
       
        <ul className="User-ifo">
          此处为tem子组件
        </ul>
        {
          infoList.map((item,index)=>{
            return (
              <div key={index} index={index} >
                <Item key={item?item:index} index={index} name={item.name} age={item.age} gender={item.gender} />
                <button onClick={this.changeList}>删除</button>
              </div>
            )
          })
        }
        <Add toParent={this.getChildInfo.bind(this)}/>
        
      </div>

    );
  }
}

export default App;

Answer 1

e.target.parentNode.getAttribute("data-index")??你div没data-index这个属性吧，只有index

e.target.parentNode.getAttribute("index")

或者直接写

<button onClick={()=>this.changeList(e,index)}>删除</button>

  changeList(e,i){
    
    console.log(i);
   
  }

Answer 2

<button/> 上没有data-index属性 加上就行了