用React做一个Todo

第一步

1.创建一个文件夹来存放项目文件
2.打开cmd窗口进入到刚创建的文件夹目录
3.在cmd窗口输入 $ npx create-react-app my-app 
3. 文件下载完成在窗口中输入 cd my-app 进入到文件内去 
4. 在cmd窗口输入 npm start 此刻项目文件会自动启动打开浏览器的http://localhost:3000端口下运行
5.在项目文件中删除一些官方自带的文件

第二步

1.创建index.js文件
2.引入项目的依赖
3.创建App.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

这里要另外安装axios依赖，这个用来发送Ajax请求的
首先要安装yarn,自行百度

import React, { Component } from 'react';
import Todolist from './Todolist';
import axios from "axios";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputvalue :  "",
      List : []
    }
    this.remove = this.remove.bind(this);
    this.addClick = this.addClick.bind(this);
    this.handerloChange = this.handerloChange.bind(this);
    
  }
  render() {
    return (
      <div>
        <div>
            <input type="text" placeholder="请输入待办事项" value={this.state.inputvalue} onChange={this.handerloChange}></input>
            <button onClick={this.addClick}>提交</button>
        </div>
        <ul>
            {this.getTodoItem ()}
        </ul>
      </div>
    );
  }
  componentDidMount() {
    axios.get('http://yapi.demo.qunar.com/mock/38353/app')
    .then((res) =>{ console.log(res.data);
      this.setState(() =>{
          return {
            List : res.data
          }
      });
    })
    .catch(() =>{alert('erro')})
  }
  getTodoItem () {
    return  this.state.List.map((item,index) =>{
      return(
            <Todolist
             key={index} 
             content={item} 
             index={index} 
             delet={this.remove}
             />
      )
    })
  }
  handerloChange (e) { 
    const value = e.target.value;
    this.setState(() => ({
        inputvalue : value
    }));
  }
  addClick () {
    this.setState((prevState) =>({
      List : [...prevState.List,prevState.inputvalue],
      inputvalue : ""
    }))
  }
  remove (index) {
 
    this.setState((prevState) => {
      const List = [...prevState.List];
      List.splice(index,1);
      return {List}
    });
  }
}

export default App;

第三步

创建Todolist 组件
新建一个Todolist .js文件
代码如下：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Todolist extends Component {
    constructor(props) {
      super(props);
      this.state={
       }
      this.handelClick = this.handelClick.bind(this);
    }
    shouldComponentUpdate(nextProps,nextState) {
        if(nextProps.content !== this.props.content) {
            return true;
        }else{
            return false;
        }
    }
    render() {
        const {content} = this.props;
        
        return (
            <div onClick={this.handelClick}>{content}</div>
        )
    }


    handelClick() {
        const {delet,index} = this.props;
        delet(index);
    }
}
Todolist.propTypes = {
    content : PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
    delet : PropTypes.func,
    index : PropTypes.number
}
export default Todolist;

最后

npm run start 来运行项目