React入门 制作简单的todolist

要熟悉组件间的关系，可以通过制作todolist来做到，在此之前我已经使用Vue完成过了
vue学习笔记—搭建简单的todolist
接下来要使用React来完成

---

首先，我直接使用create-react-app来搭建一个简单的项目
目录如下

将src中除了App.js，index.js，serviceWorker.js之外的文件删除，目录改为如图

component下存放组件，assets下存放静态文件，这里为了方便我只用一个css文件
重新编辑index.js和App.js如下

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './component/todo/header';
import Add from './component/todo/add';
import List from './component/todo/list';

class App extends React.Component{
    render(){
    return(    
        <div>
            <Header />
            <Add />
            <List />
        </div>
    )
    }
}
export default App;

先简单地写一下三个组件的内容

// header.js
import React from 'react';

class Header extends React.Component{
    render(){    
    return(    
        <div className="header">
            <h1 className="title">todolist</h1>
        </div>
    )}
}

export default Header;

// add.js
import React from 'react';

class Add extends React.Component{
    render(){    
    return(    
        <div className="addContent">
            <p>here is add</p>
        </div>
    )}
}

export default Add;

import React from 'react';

class List extends React.Component{
    render(){    
    return(    
        <div className="contentList">
            <p>here is list</p>
        </div>
    )}
}

export default List;

出现这个页面说明到这一步没错，接下来我们开始正式写todolist
首先在父组件App.js中写好增删方法和todolist的内容

import React from 'react';
import Header from './component/todo/header';
import Add from './component/todo/add';
import List from './component/todo/list';
import './assets/style/whole.css'

class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
            // todolist的具体内容
            contentList:[{
                id:0,
                title:'todo 1',
                completed:false
            },{
                id:1,
                title:'todo 2',
                completed:false
            }],
            // 计数，每次增加一个新内容时赋值给id然后加1
            count:2
        }
        // 为各个方法绑定this
        this.handleAdd=this.handleAdd.bind(this);
        this.handleDelete=this.handleDelete.bind(this);
        this.handleComplete=this.handleComplete.bind(this);
    }
    // 添加内容
    handleAdd(content){
        content.id=this.state.count++;
        let list=this.state.contentList;
        list.push(content);
        this.setState({
            contentList:list
        })
    }
    // 删除内容
    handleDelete(id){
        let list=this.state.contentList;
        for(let i=0;i<list.length;i++){
            if(list[i].id===id){
                list.splice(i,1);
            }
        }
        this.setState(()=>{
            return {
                contentList:list
            }
        })
    }
    // 内容完成
    handleComplete(id){
        let list=this.state.contentList;
        for(let i=0;i<list.length;i++){
            if(list[i].id==id){
                list[i].completed=!list[i].completed
            }
        }
        this.setState({
            contentList:list
        })
    }
    render(){
        return(
            <div>
                <Header />
                <Add onAddClick={this.handleAdd}/>
                <List 
                    contentList={this.state.contentList} 
                    onDeleteClick={this.handleDelete} 
                    onCompletedChange={this.handleComplete}/>
            </div>
        )
    }
}
export default App;

因为React的数据流是从上往下的，所以我们将todolist的数据和修改（增加和删除）的方法放在父组件中，修改后再传给子组件，在子组件中触发父组件的方法
各个子组件代码如下

// header.js
import React from 'react';

class Header extends React.Component{
    render(){    
    return(    
        <div className="header">
            <h1 className="title">todolist</h1>
        </div>
    )}
}

export default Header;

// add.js
import React from 'react';
import '../../assets/style/whole.css'

class Add extends React.Component{
    constructor(props){
        super(props);
        this.state={
            // 输入框的内容
            title:''
        }
        // 为各个方法绑定this
        this.handleChange=this.handleChange.bind(this);
        this.addContent=this.addContent.bind(this);
    }
    // 将输入的内容绑定在state的title上
    handleChange(e){
        this.setState({
            title:e.target.value
        })
    }
    // 添加内容
    addContent(){
        if(this.state.title!==''){
            let content={
                title:this.state.title,
                completed:false
            }
            // 调用父组件的方法
            this.props.onAddClick(content)
            // 重置输入框内容
            this.setState({
                title:''
            })
        }
    }
    render(){
        return(    
            <div className="addContent">
                <input placeholder="请输入要添加的标题" value={this.state.title} onChange={this.handleChange}/>
                <button onClick={this.addContent}>add</button>
            </div>
        )}
}

export default Add;

// list.js
import React from 'react';
import '../../assets/style/whole.css'

class List extends React.Component{
    constructor(props){
        super(props);
        this.deleteHandle=this.deleteHandle.bind(this);
    }
    deleteHandle(id){
        // 调用父组件的方法
        this.props.onDeleteClick(id);
    }
    render(){  
        // 按列表标题的数量来渲染内容
        const element = this.props.contentList.map((c)=>{
            return(
                <li className="detailContent" key={c.id}>
                    <input type="checkbox" onChange={this.props.onCompletedChange.bind(this,c.id)}/>
                    <span className={c.completed?'haveCompleted':'notCompleted'}>{c.title}</span>
                    <button onClick={this.deleteHandle.bind(this,c.id)}>删除</button>
                </li>
            )
        })
        return(    
            <div className="contentList">
                <ul>
                    {element}
                </ul>
            </div>
        )}
}

export default List;

最后加一点css

ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

button {
    cursor: pointer;
}

.detailContent .haveCompleted {
    text-decoration: line-through;
    color: #f00;
}

.detailContent {
    text-align: left;
    padding: 20px;
    margin: 2px;
    font-size: 20px;
    color: #fff;
    background-color: #333;
}

.detailContent span {
    margin: 0 30px;
}

.addContent {
    padding: 10px;
    width: 400px;
    border: 1px #333 solid;
}

.addContent input {
    width: 320px;
    margin-right: 10px;
    border: none;
    outline: none;
    font-size: 24px;
}

.addContent button {
    border: 1px solid #333;
    font-size: 28px;
    color: #fff;
    background-color: #333;
}

大功告成，虽然有点丑，但是完成了基本的内容