赵走x博客 - 开发者的网上家园

33、构建实例应用：Whinepad v.0.0.1

资源编号:76083 书籍 React快速上手开发热度：110

到目前为止，你已经学会：创建React 自定义组件（以及使用内建组件）的所有相关基础知识，使用JSX 定义用户界面（可选）的方法，以及构建并发布应用的流程。是时候创建一个更完整的应用了。

我们把这个应用称为Whinepad，用户可以在这个应用中对品尝过的酒类写下笔记并进行评价。事实上，用户不仅可以评价酒类，还可以留下任何想要抱怨1 的内容。这个应用应该涵盖常见的添加、查询、修改、删除（CRUD）功能。此外，它还是一个把数据存储在客户端的纯客户端应用。由于本书以学习React 为目的，应用中所有与React 不相关的部分（比如数据存储、样式等）将不作详述。

在本章中，你将学习以下内容：
* 从可重用的小组件开始，构建整个应用；
* 进行组件间通信，让不同的组件共同发挥作用。

# Whinepad v.0.0.1

我们将在上一章建立的模板应用的基础上进行Whinepad 应用的开发。当你品尝了一些新的酒类之后，可以在这个应用中记录笔记并进行评价。不如就把欢迎界面设置为曾经评价过的内容列表吧？这只需简单地重用第3 章创建的<Excel> 组件即可。

>注1：英文原文是whine，与酒类（wine）同音。这个单词在应用名中用作双关。——编者注

# 1、基本设置
首先复制一份reactbook-boiler 模板应用的源代码， 然后把项目重命名为whinepadv0.0.1，并在此基础上进行开发。（可以从https://github.com/stoyan/reactbook/ 下载代码。）
下一步，运行监听脚本，以便在文件内容发生改变时自动重新构建：
```
$ cd ~/reactbook/whinepad\ v0.0.1/
$ sh scripts/watch.sh
```

# 2、开始编写代码
修改index.html 文件中的标题，并把id 属性修改为`id="pad"`，以匹配我们的应用名称：
```
<!DOCTYPE html>
<html>
  <head>
    <title>Whinepad v.0.0.1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="bundle.css">
  </head>
  <body>
    <div id="pad"></div>
    <script src="bundle.js"></script>
  </body>
</html>
```
我们把JSX 版本Excel 组件的源代码（出现在第4 章末尾处）复制到js/source/components/Excel.js 中：
```
import React from 'react'
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'

class Excel extends React.Component{
    // propTypes:{
    //     headers:[],
    //     initialData: []
    // },
    // propTypes:{
    //     headers:React.PropTypes.isRequired.arrayOf(React.PropTypes.string),
    //     initialData: React.PropTypes.arrayOf(
    //         React.PropTypes.arrayOf(React.PropTypes.string)
    //     ).isRequired
    // },
    getInitialState(){
        return {
            data:this.props.initialData,
            sortby:null,
            descending:false,
            edit: null,// [行索引, 列索引],
            search:false
        }
    }
    _sort(e){
        var column=e.target.cellIndex;
        var data=this.state.data.slice();
        var descending=this.state.sortby===column && !this.state.descending;
        data.sort(function (a,b) {
            return descending?(a[column]<b[column]?1:-1):(a[column]>b[column]?1:-1)
        });
        this.setState({
            data:data,
            sortby:column,
            descending:descending
        });
    }
    _showEditor(e){
        this.setState({
            edit:{
                row:parseInt(e.target.dataset.row,10),
                cell:e.target.cellIndex
            }
        });
    }
    _save(e){
        e.preventDefault();
        //进行保存
        var input=e.target.firstChild;
        var data=this.state.data.slice();
        data[this.state.edit.row][this.state.edit.cell]=input.value;
        this.setState({
            edit:null,
            data:data
        })

}
    _renderToolBar(){

return React.DOM.div({className: 'toolbar'},
            React.DOM.button(
                {onClick: this._toggleSearch,className:'toolbar'},
                'search'
            ),
            React.DOM.a({onClick:this._download.bind(this,'json'),href:'data.json'},'Export JSON'),
            React.DOM.a({onClick:this._download.bind(this,'csv'),href:'data.csv'},'Export CSV'),
        )
    }
    _download(format,ev){
        var contents=format==='json'?JSON.stringify(this.state.data):
            this.state.data.reduce(function (result, row) {
                return result+
                    row.reduce(function (rowresult,cell,idx) {
                        return rowresult+'"'+cell.replace(/"/g,'""')+'"'
                            +(idx<row.length-1?',':'');
                    },'')
                    +"\n";
            },'');
        var URL=window.URL||window.webkitURL;
        var blob=new Blob([contents],{type:'text/'+format})
        ev.target.href=URL.createObjectURL(blob);
        ev.target.download='data.'+format
    }
    _renderSearch(){
        if(!this.state.search){
            return null
        }
        return (React.DOM.tr({onChange:this._search},
            this.props.headers.map(function (_ignore, idx) {
                return React.DOM.td({key:idx},
                    React.DOM.input({type:'text','data-idx':idx})
                )
            })
        ))
    }
    _toggleSearch(){
        if(this.state.search){
            this.setState({
                data:this._preSearchData,
                search:false
            });
            this._preSearchData=null;
        }else{
            this._preSearchData=this.state.data;
            this.setState({
                search:true
            });
        }
    }
    _search(e){
        var needle=e.target.value.toLowerCase();
        if(!needle){
            // 当搜索字符串被删除时
            this.setState({
                data:this._preSearchData
            });
            return;
        }
        // 需要搜索的那一列的索引值
        var idx=e.target.dataset.idx;
        var searchData=this._preSearchData.filter(function (row) {
            return row[idx].toString().toLowerCase().indexOf(needle)>-1;
        });
        this.setState({
            data:searchData
        });
    }
    _renderTable(){
        return(
            React.DOM.table(null,
                React.DOM.thead({onClick:this._sort},
                    React.DOM.tr(null,
                        this.props.headers.map(function (title,idx) {
                            console.log(this)
                            if(this.state.sortby===idx){
                                title+=this.state.descending?'\u2191':'\u2193'
                            }
                            return React.DOM.th({key:idx},title);
                        },this)
                    )

),
                React.DOM.tbody({onDoubleClick:this._showEditor},
                    this._renderSearch(),
                    this.state.data.map(function (row, rowidx) {
                        return (
                            React.DOM.tr({key:rowidx},
                                row.map(function (cell, idx) {
                                    console.log("state",this);
                                    var content=cell;
                                    var edit=this.state.edit;
                                    if(edit && edit.row===rowidx && edit.cell===idx){
                                        content=React.DOM.form(
                                            {onSubmit:this._save},
                                            React.DOM.input({
                                                type:'text',
                                                defaultValue:content
                                            })
                                        )
                                    }
                                    return React.DOM.td({
                                        key:idx,
                                        'data-row':rowidx
                                    },content)
                                },this)
                            )
                        )
                    },this)
                )
            )
        )
    }
    render(){
        return (
            <div className="Excel">
                {this._renderToolbar()}
                {this._renderTable()}
            </div>
        )
    }
}

Excel.propTypes={
    headers:PropTypes.arrayOf(PropTypes.string),
    initialData: PropTypes.arrayOf(
        PropTypes.arrayOf(PropTypes.string)
    ).isRequired
};

export default Excel
```
上述代码和之前的Excel 组件代码有一些不同，在于：
*  使用了import/export 语句；
*  使用了继承。
* 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。

相应地，所有CSS 样式需要添加前缀，就像这样：

```
.Excel input {
  font: 16px Arial;
}

.Excel td {
  border-top: 1px solid black;
  cursor: cell;
  padding: 5px;
}

.Excel th {
  cursor: pointer;
  padding: 5px;
}

.Excel table {
  border: 1px solid black;
  margin: 20px;
}

.Excel .toolbar {
  margin-left: 20px;
}

.Excel .toolbar a, .Excel .toolbar button { /* thanks css3buttongenerator.com! */
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px;
  box-shadow: 0px 1px 3px #666666;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 0;
  margin-right: 5px;
}

.Excel .toolbar a:hover, .Excel .toolbar button:hover {
  background: #3cb0fd;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

```
目前还剩下一项工作，就是在主文件app.js 中引入<Excel> 组件。前面已经提到，我们将在客户端存储数据（localStorage）。在起步阶段，为了避免页面空白，我们构造一些初始数据,并把数据传递到<Excel> 组件中：：
```
'use strict';

import Excel from './components/Excel';
import Logo from './components/Logo';
import React from 'react';
import ReactDOM from 'react-dom';

var headers = localStorage.getItem('headers');
var data = localStorage.getItem('data');

if (!headers) {
  headers = ['Title', 'Year', 'Rating', 'Comments'];
  data = [['Test', '2015', '3', 'meh']];
}

ReactDOM.render(
  <div>
    <h1>
      <Logo/> Welcome to Whinepad!
    </h1>
    <Excel headers={headers} initialData={data}/>
  </div>,
  document.getElementById('pad')
);
```

在Logo.css 文件中再增添一些样式，你就完成了这个0.0.1 版本（如图6-1 所示）！

![bs64](https://img.handsomemark.com/2019/11/13/3e5f73b0-05c5-11ea-848c-0242ac140002.png)
图6-1：Whinepad v.0.0.1