react 实现动态增加数据

import React, { Component } from 'react';
//import logo from './logo.svg';
//import './App.css';

class App extends Component {

  //创建完组件APP后会自动调用 constructor()构造函数
  constructor(props){
    super(props);
    //下面为数据项
    this.state = {
      list: [
       
      ],
      inputValue: ''
    }
  }
  handleBtClick(){
      this.setState({
        list: [...this.state.list, this.state.inputValue],
        inputValue:''
      })
  }

  handleInputChange(e){
      this.setState({
        inputValue: e.target.value
      })
  }

  handleItemClick(index){
      const list = [...this.state.list];
      list.splice(index, 1);
      this.setState({
        list: list
      })

  }
  render() {
    return (
      <div className="App">
        <div>
            <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
            <button onClick={this.handleBtClick.bind(this)}>add</button>
        </div>    
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
            })
          }
        </ul>

      </div>
    );
  }
}

export default App;

鼠标点击sd等选项后也可是删除