一个简单的 react 实例： < TodoList >

<  react     TodoList:  >

组件：

 //引入React ；

 import React  from 'react';

 //组件

 class TodoList extends React.Component{

   constructor(props){

     super(props);

     this.state={

      list :[],

      inputValue:""

     }

   }

   //按钮的点击事件；

   addClick(){

     this.setState({

       list:[...this.state.list, this.state.inputValue],

       inputValue:""

     })

   }

   // input 里面的onChange 事件；

   addChange(e){

     this.setState({

       inputValue:e.target.value

     })

   }

   //map 循环后的删除事件；

   handleItemClick(index){

     // 这个会打印出每条数据的下标

     // console.log(index)

     const list = [...this.state.list];

     list.splice(index,1)

     this.setState({list:list})

   }

   render(){

     return(

       <div>

         <input value={this.state.inputValue} onChange={this.addChange.bind(this)}/>

         <button onClick={this.addClick.bind(this)}>add</button>

         <ul>

           {

             this.state.list.map((item, index)=>{

               return<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>

             })

           }

         </ul>

       </div>

     )

   }

 }

 //抛出去

 export default TodoList

index.js 文件

 //引入React库

 import React from 'react';

 import ReactDOM from 'react-dom';

 // 引入TOdoList组件

 import TodoList from './TodoList'

 ReactDOM.render(<TodoList />, document.getElementById('root'));

代码有那点不完善的，还请留言指出哦！