React入门练习Demo — ToDoList

最近学习了React，为了快速上手和加深理解做了一个实例todolist，特此记录

最终效果：

功能包括：

• 添加
• 删除
• 完成

---

环境搭建

//创建项目
create-react-app 项目名
//搭建create-react-app脚手架
npm install -g create-react-app
//运行
npm start	

---

先把每个组件写好，然后拼凑在一起。
部分代码和样式省略，重要知识点在代码中的已注释

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

App.js

import React, { Component } from 'react';
import './css/App.css';
import Clock from './views/Clock'
import InputBox from './views/InputBox.js'
import Events from './views/Events.js'
//引入样式及组件

class App extends Component {
  constructor(props) {
  //构造器
    super(props)
    this.state = {
      items: []
    }
  }
  addItem(name){
  //添加
    let time = new Date()
    let item = {
      name: name,
      done: false,
      time: `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
    }
    //更新state需要使用setState方法
    this.setState({
      items: [item, ...this.state.items]
    })
  }
  delItem(id){
  	//删除
    this.state.items.splice(id, 1)
    this.setState({});
  }
  doneItem(id){
  	//已完成
    this.state.items.map(
      (item, index) => index === id ? item.done = true : item
    )
    this.setState({});
  }
  render() {
  //渲染
    let update = this.state.items
      //通过回调函数，实现子组件向父组件传参
    return (
      <div className="App">
        <InputBox addItem={(item)=>{this.addItem(item)}}/>
        <Events items = {update} 
          handleDel = { (id) =>{  this.delItem(id) }}
          handleDone = { (id) => {  this.doneItem(id) }}
        />
      </div>
    );
  }
}


export default App;

InputBox.js

import React, { Component } from 'react';
import "../css/inputBox.css"

class InputBox extends Component {
  constructor(props){
    super(props);
    this.state = {
      value: '',
    };
  }
  handleClick = (name, e) => {
    e.preventDefault();
    this.props.addItem (this.state.value) 
    //传递参数给父组件
  }
  handleChange(event) {
    this.setState({value: event.target.value});//更新状态
  }
  render() {
    let value = this.state.value
    return (
      <div className = "inputBox">
        <input 
          type="text"  
          className = "input" 
          value={value} 
          onChange={this.handleChange.bind(this)} 
        />
        <button onClick={this.handleClick.bind(this, this.state.value)} className = "submit">
          Submit
        </button>
      </div>
    );
  }
}

export default InputBox

Events.js

import React, { Component } from 'react';
import "../css/events.css"

class Events extends Component {
  constructor(props) {
    super(props)
    this.state = { }
  }
  render() {
  //通过map实现列表渲染
    let items = this.props.items.map((item,index) => 
    <div className = "row" key={index}>
      <div className ="column big">
        {index+1}.
        {item.name}
      </div>
      <div className ="column small">
        {item.done ? "已完成" : "未完成"} 
      </div>
      <div className ="column big">
        {item.time}
      </div>
      <div className ="column small">
        <button className = "button done" onClick={this.props.handleDone.bind(this,index)}>
          完成
        </button>
      </div>
      <div className ="column small">
        <button className = "button del" onClick={this.props.handleDel.bind(this,index)}>
          删除
        </button>
      </div>
    </div> 
    );

    return (
      <div className = "box">
        {items}
      </div>
    );
  }
}

export default Events

---

看完官方文档的基础知识后，做一个todolist实例，我认为这是很好的学习一门框架的方法