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

 

 <  react     TodoList:  >

组件：

 1 //引入React ；
 2 import React  from 'react';
 3 //组件
 4 class TodoList extends React.Component{
 5   constructor(props){
 6     super(props);
 7     this.state={
 8      list :[],
 9      inputValue:""
10     }
11   }
12   //按钮的点击事件；
13   addClick(){
14     this.setState({
15       list:[...this.state.list, this.state.inputValue],
16       inputValue:""
17     })
18   }
19   // input 里面的onChange 事件；
20   addChange(e){
21     this.setState({
22       inputValue:e.target.value
23     })
24   }
25   //map 循环后的删除事件；
26   handleItemClick(index){ 
27     // 这个会打印出每条数据的下标
28     // console.log(index)
29     const list = [...this.state.list];
30     list.splice(index,1)
31     this.setState({list:list})    
32   }
33   render(){      
34     return(
35       <div>
36         <input value={this.state.inputValue} onChange={this.addChange.bind(this)}/>
37         <button onClick={this.addClick.bind(this)}>add</button>
38         <ul>
39           {
40             this.state.list.map((item, index)=>{
41               return<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
42             })
43           }   
44         </ul>
45       </div>
46     )
47   }
48 }
49 
50 //抛出去
51 export default TodoList


index.js 文件

1 //引入React库
2 import React from 'react';
3 
4 import ReactDOM from 'react-dom';
5 // 引入TOdoList组件
6 import TodoList from './TodoList'
7 
8 ReactDOM.render(<TodoList />, document.getElementById('root'));

 

 

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

 

posted @ 2020-02-07 21:20  柚子小哥哥  阅读(265)  评论(0)  编辑  收藏  举报