用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列表數據

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputVal : ''
    }
  }

        再寫總體頁面，即一個輸入框和添加按鈕，還有列表事件

render() {
    return (
      <div className="App">
        <div>
          <input value={this.state.inputVal} onChange={this.handleinput.bind(this)}/>
          <button onClick={this.handleBut.bind(this)}>添加</button>
        </div>
        <ul>
        {
          this.state.list.map((item,index) => {
            return <li key = {index} onClick={this.handleItem.bind(this)}>{item}</li>
          })
        }
        </ul>
      </div>
    );
  }

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

 handleBut(){
    this.setState({
      list : [...this.state.list, this.state.inputVal],
      inputVal : ''
    })
  }

  handleinput(e){
    this.setState({
      inputVal : e.target.value
    })
  }

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

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

在input中輸入事件添加即可

然后點擊對應的事件就可以刪除。

 

 

總體代碼如下：

App.js:

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputVal : ''
    }
  }


  handleBut(){
    this.setState({
      list : [...this.state.list, this.state.inputVal],
      inputVal : ''
    })
  }

  handleinput(e){
    this.setState({
      inputVal : e.target.value
    })
  }

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

  render() {
    return (
      <div className="App">
        <div>
          <input value={this.state.inputVal} onChange={this.handleinput.bind(this)}/>
          <button onClick={this.handleBut.bind(this)}>添加</button>
        </div>
        <ul>
        {
          this.state.list.map((item,index) => {
            return <li key = {index} onClick={this.handleItem.bind(this)}>{item}</li>
          })
        }
        </ul>
      </div>
    );
  }
}

export default App;

 

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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