如果在ul上绑定事件

import React, {Fragment, Component} from 'react';

// function todo() {
//   var state = {
//     inputVal: "hello xxx",
//     list: []
//   }
//   return (
//     <Fragment>
//       <input value={state.inputVal}/>
//       <ul>
//         <li>苹果</li>
//         <li>橘子</li>
//         <li>西瓜</li>
//       </ul>
//     </Fragment>
//   );
// }

class todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: '',
      list: ['111','222']
    }
  }
  handleInputChange(e) {
    // console.log(e);
    // console.log(this);
    this.setState({
      inputVal: e.target.value
    })
  }
  handleKeyUp(e) {
    if(e.keyCode === 13) { //按了回车
      const list = [...this.state.list, this.state.inputVal];
      this.setState({
        inputVal: '',
        list: list
      })
    }
  }
  handleEvent(e) {
    const li = e.target;
    let list = [...this.state.list];
    list = list.filter((value,index) => {
      return value !== li.innerText;
    });
    this.setState({
      list
    });
  }
  render() {
    return (
      <Fragment>
        <input 
          value={this.state.inputVal} 
          onChange={this.handleInputChange.bind(this)}
          onKeyUp={this.handleKeyUp.bind(this)}
        />
        <ul onClick={this.handleEvent.bind(this)}>
          {
            this.state.list.map((value, index) => {
              return <li key={index}>{value}</li>
            })
          }
        </ul>
      </Fragment>
    )
  }
}
export default todo;

如果像上面这样写，效果也实现了，但是通过比较innerText好像不太好，如果text很多的话。

所以是不是可以在li上绑定一个自定义属性，值是index？后面就通过比较自定义属性筛选。。。

应该怎么实现呢，react咋自定义属性然后取到呀？

还有我发现li上的key，直接li.key或者li.getAttribute() 都不行