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

44、构建实例应用：<Whinepad>

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

终于到了最后一个组件，也就是所有组件的父组件

终于到了最后一个组件，也就是所有组件的父组件（如图6-13 所示）。这个组件比Excel表格组件简单一点，依赖也更少：
```
import Button from './Button'; // <- 用于添加新条目
import Dialog from './Dialog'; // <- 用于弹出添加新条目的对话框
import Excel from './Excel'; // <- 所有内容的表格容器
import Form from './Form'; // <- 添加新条目时的表单
import React, {Component,} from 'react';
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'
```

![bs64](https://img.handsomemark.com/2019/11/18/f32cec58-09be-11ea-9a95-0242ac140002.png)
图6-13：Whinepad 负责CRUD 中的C

这个组件只需接收两个属性：schema 数据配置和初始数据：
```
Whinepad.propTypes = {
	schema: PropTypes.arrayOf(
	PropTypes.object
),
initialData: PropTypes.arrayOf(
	PropTypes.object
),
};
export default Whinepad;
```
如果你已经仔细阅读了Excel 组件的实现逻辑，这个组件对你来说应该不太困难：
```
class Whinepad extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: props.initialData,
            addnew: false,
        };
        this._preSearchData = null;
    }
    _addNewDialog() {
        this.setState({addnew: true});
    }
    _addNew(action) {
        if (action === 'dismiss') {
            this.setState({addnew: false});
            return;
        }
        let data = Array.from(this.state.data);
        data.unshift(this.refs.form.getData());
        this.setState({
            addnew: false,
            data: data,
        });
        this._commitToStorage(data);
    }
    _onExcelDataChange(data) {
        this.setState({data: data});
        this._commitToStorage(data);
    }
    _commitToStorage(data) {
        localStorage.setItem('data', JSON.stringify(data));
    }
    _startSearching() {
        this._preSearchData = this.state.data;
    }
    _doneSearching() {
        this.setState({
            data: this._preSearchData,
        });
    }
    _search(e) {
        const needle = e.target.value.toLowerCase();
        if (!needle) {
            this.setState({data: this._preSearchData});
            return;
        }
        const fields = this.props.schema.map(item => item.id);
        const searchdata = this._preSearchData.filter(row => {
            for (let f = 0; f < fields.length; f++) {
                if (row[fields[f]].toString().toLowerCase().indexOf(needle) > -1) {
                    return true;
                }
            }
            return false;
        });
        this.setState({data: searchdata});
    }
    render() {
        return (
            <div className="Whinepad">
                <div className="WhinepadToolbar">
                    <div className="WhinepadToolbarAdd">
                        <Button
                            onClick={this._addNewDialog.bind(this)}
                            className="WhinepadToolbarAddButton">
                            + add
                        </Button>
                    </div>
                    <div className="WhinepadToolbarSearch">
                        <input
                            placeholder="Search..."
                            onChange={this._search.bind(this)}
                            onFocus={this._startSearching.bind(this)}
                            onBlur={this._doneSearching.bind(this)} />
                    </div>
                </div>
                <div className="WhinepadDatagrid">
                    <Excel
                        schema={this.props.schema}
                        initialData={this.state.data}
                        onDataChange={this._onExcelDataChange.bind(this)} />
                </div>
                {this.state.addnew
                    ? <Dialog
                        modal={true}
                        header="Add new item"
                        confirmLabel="Add"
                        onAction={this._addNew.bind(this)}
                    >
                        <Form
                            ref="form"
                            fields={this.props.schema} />
                    </Dialog>
                    : null}
            </div>
        );
    }
}

```
要注意组件通过onDataChange 注册来监听Excel 组件中的数据变化。还要知道所有数据都只是简单地存储在localStorage 中：
```
_commitToStorage(data) {
        localStorage.setItem('data', JSON.stringify(data));
    }
```
此处也可以发起任何异步请求（即XHR、XMLHttpRequest、Ajax），把数据保存在服务
端，而不仅是保存在客户端。

# 总结
本章开始就提到，应用的主入口文件是app.js。这个文件既不是组件也不是模块；它没有输出任何内容。它的作用仅仅是进行初始化工作——从localStorage 中读取已存在的数据，并配置<Whinepad> 组件：
```
'use strict';
import Logo from './components/Logo';
import React from 'react';
import ReactDOM from 'react-dom';
import Whinepad from './components/Whinepad';
import schema from './schema';
let data = JSON.parse(localStorage.getItem('data'));
// 如果localStorage中没有数据，则从schema中读取默认的示例数据
if (!data) {
    data = {};
    schema.forEach(item => data[item.id] = item.sample);
    data = [data];
}
ReactDOM.render(
    <div>
        <div className="app-header">
            <Logo /> Welcome to Whinepad!
        </div>
        <Whinepad schema={schema} initialData={data} />
    </div>,
    document.getElementById('pad')
);
```
至此，这个应用就完成了。你可以到http://whinepad.com 进行体验，并在https://github.com/stoyan/reactbook/ 浏览完整代码。