用react写一个demo,增删列表

Posted yyxyeyue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用react写一个demo,增删列表相关的知识,希望对你有一定的参考价值。

 

 

今天学了一点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‘));

 


以上是关于用react写一个demo,增删列表的主要内容,如果未能解决你的问题,请参考以下文章

[vscode]--HTML代码片段(基础版,reactvuejquery)

用react + redux + router写一个todo

用react + redux + router写一个todo

把字符串的增删查改,插入以及删除各种操作封装为一个用c代码写的库,代码怎么写,我写不来求教

写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

react文档demo实现输入展示搜索结果列表