用react写一个demo，增删列表

Posted 2020-12-29 yyxyeyue

 

 

今天学了一点react，挺好玩的哈哈，分享一下demo

1.环境搭建

  （1）首先进入node.js官网，下载nods.js后安装，安装成功后会自带安装npm，接下来验证是否安装成功，在cmd中输入node -v和npm -v后若输出版本号及证明安装成功，如下：

 

（2）下载submit._text,进入submit官网，下载软件后安装即可

2.react项目创建

   （1）进入cmd，输入命令

npx create-react-app app
cd app
npm start

即可创建一个名为app的文件，接着就可以进行开发

3.react开发

（1）项目目录

         主要为src目录中的文件，入口文件是index.js,它引用了App.js文件，如下

        为了简化项目结构，可以只保留index.js和App.js两个文件，并将其他引用删除，方便开发，最后只剩下如下内容:

（2）正式开发

        先定义一个constructor构造器，存放todoList列表数据

1   constructor(props){
2     super(props);
3     this.state = {
4       list: [],
5       inputVal : ‘‘
6     }
7   }

        再写总体页面，即一个输入框和添加按钮，还有列表事件

 1 render() {
 2     return (
 3       <div className="App">
 4         <div>
 5           <input value={this.state.inputVal} onChange={this.handleinput.bind(this)}/>
 6           <button onClick={this.handleBut.bind(this)}>添加</button>
 7         </div>
 8         <ul>
 9         {
10           this.state.list.map((item,index) => {
11             return <li key = {index} onClick={this.handleItem.bind(this)}>{item}</li>
12           })
13         }
14         </ul>
15       </div>
16     );
17   }

       然后添加插入事件以及删除事件的方法

 1  handleBut(){
 2     this.setState({
 3       list : [...this.state.list, this.state.inputVal],
 4       inputVal : ‘‘
 5     })
 6   }
 7 
 8   handleinput(e){
 9     this.setState({
10       inputVal : e.target.value
11     })
12   }
13 
14   handleItem(index){
15     const list = [...this.state.list];
16     list.splice(index, 1);
17     this.setState({list})
18   }

         到此就差不多完成了，运行http://localhost:3000/即可看到

在input中输入事件添加即可

然后点击对应的事件就可以删除。

 

 

总体代码如下：

App.js:

 1 import React, { Component } from ‘react‘;
 2 
 3 class App extends Component {
 4 
 5   constructor(props){
 6     super(props);
 7     this.state = {
 8       list: [],
 9       inputVal : ‘‘
10     }
11   }
12 
13 
14   handleBut(){
15     this.setState({
16       list : [...this.state.list, this.state.inputVal],
17       inputVal : ‘‘
18     })
19   }
20 
21   handleinput(e){
22     this.setState({
23       inputVal : e.target.value
24     })
25   }
26 
27   handleItem(index){
28     const list = [...this.state.list];
29     list.splice(index, 1);
30     this.setState({list})
31   }
32 
33   render() {
34     return (
35       <div className="App">
36         <div>
37           <input value={this.state.inputVal} onChange={this.handleinput.bind(this)}/>
38           <button onClick={this.handleBut.bind(this)}>添加</button>
39         </div>
40         <ul>
41         {
42           this.state.list.map((item,index) => {
43             return <li key = {index} onClick={this.handleItem.bind(this)}>{item}</li>
44           })
45         }
46         </ul>
47       </div>
48     );
49   }
50 }
51 
52 export default App;

 

index.js:

1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 import App from ‘./App‘;
4 
5 ReactDOM.render(<App />, document.getElementById(‘root‘));