我最喜欢的季节是夏季，今年的夏季已经结束了，接下来将会是雾霾的侵袭，整天心情都是压抑的。夏季可以开车去逛逛，玩玩水什么的，秋冬季真的是哪里都不想去。丹凤棣花古镇一日游，怀念夏季。

感觉跑遍大江南北，还是老家好。废话不多说，十一回商洛老家。

第一篇只是搭建了一个简单的主页面，这一节我打算还是和vue和angular一样，搞一个查询页面，先看图。

看到没有，和那两个界面没啥区别。本来是要用react element-ui，怎奈网站打不开，没有文档，没法搞，自己就简单搞一个bootstrap的table，也不分页了。

先看代码，customer.js代码如下

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'element-theme-default';
import { Button } from 'element-react';
import axios from 'axios';

class Customer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            userno: '',
            username: '',
            sex: "-1",
            customerList: { dataList: [], total: 0 }
        };

        this.query = this.query.bind(this);
        this.getOAuthToken();
    }

    client_id = 'xxxx-xxxx-xxxxxxx-xxxxxx';
    tokenUrl = '/token';
    baseUrl = 'http://xxx.wer.com:8008';
    accessToken = null;
    userNameChange = function (event) {
        this.setState({
            username: event.target.value
        });
    }

    userNoChange = function (event) {
        this.setState({
            userno: event.target.value
        });
    }

    userSexChange = function (event) {
        this.setState({
            sex: event.target.value
        });
    }

    getOAuthToken = function () {
        let request = {
            username: "admin",
            password: '111111'
        };
        let body = `username=${request.username}&password=${request.password}&grant_type=password&client_id=${this.client_id}`;
        var requestUrl = this.baseUrl.concat(this.tokenUrl);
        axios.post(requestUrl, body, {
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            }
        }).then((response) => {
            this.accessToken = response.data.access_token;
        });
    }

    query = function () {
        var queryUrl = this.baseUrl.concat('/api/customer/list?pageindex=0' + '&pageSize=10');
        if (this.state.userno) {
            queryUrl += '&userno=' + this.state.userno;
        }

        if (this.state.username) {
            queryUrl += '&userno=' + this.state.username;
        }

        if (this.state.sex != '-1') {
            queryUrl += '&sex=' + this.state.sex;
        }

        axios.get(queryUrl,
            { headers: { 'Authorization': `bearer ${this.accessToken}` } }).then((response) => {
                this.setState({ customerList: { dataList: response.data.CustomerList, total: response.data.TotalCount } });
                this.readerCustomerList();
            });
    }

    readerCustomerList() {
        ReactDOM.render(
            <div id="customer" class="margin-t10">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <label>会员管理</label>
                        </h3>
                    </div>
                    <div class="panel-content padding-5">
                        <div class="row">
                            <label class="col-md-1">用户名：</label>
                            <div class="col-md-3">
                                <input class="form-control" value={this.state.userno} onChange={(e) => this.userNoChange(e)} />
                            </div>
                            <label class="col-md-1">姓名：</label>
                            <div class="col-md-2">
                                <input class="form-control" value={this.state.username} onChange={(e) => this.userNameChange(e)} />
                            </div>
                            <label class="col-md-1">性别：</label>
                            <div class="col-md-2">
                                <select class="form-control" value={this.state.sex} onChange={(e) => this.userSexChange(e)}>
                                    <option value="-1">---请选择---</option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                            <div class="col-md-1">
                                <Button type="primary" onClick={this.query}>查询</Button>
                            </div>
                            <div class="col-md-12">
                                <div id="customerlist" class="margin-t10">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>用户名</th>
                                                <th>姓名</th>
                                                <th>性别</th>
                                                <th>推荐人</th>
                                                <th>余额</th>
                                                <th>创建日期</th>
                                            </tr>
                                        </thead>
                                        {
                                            this.readerTable()
                                        }
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>,
            document.getElementById("main_content")
        )
    }

    readerTable() {
        return <tbody>
            {

                this.state.customerList.dataList.map((d,index) => {
                    return (<tr key={index}>
                        <td>{d.UserNo}</td>
                        <td>{d.Name}</td>
                        <td>{d.Sex=='1'? '男':'女'}</td>
                        <td>{d.ParentCustomerName}</td>
                        <td>{d.Amount}</td>
                        <td>{d.InDate}</td>
                    </tr>)

                })
            }

        </tbody>
    }

    componentDidMount() {
        this.readerCustomerList();
    }
    render() {
        return '';
    }
}

export default Customer;

构造函数中，我们定义了一些用来绑定的属性，把他们放到state中，state是什么，他是一个状态机，解释如下

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

然后接下来有一段this.query = this.query.bind(this);这段目的是为了能够在query方法中通过this访问其他function或者变量，其实就是改变this指向，否则在query中的this指向的是查询按钮这个dom对象。

紧接着我们通过getOAuthToken去获取一下access_token，用于查询api。点击查询按钮的时候，调用query方法。大家注意查询的三个条件值value值都是绑定的state中的属性，当我们的输入发生变更以后，需要更新state中的变量值实现双向绑定。这一点实在是让我难以接受，vue和angular双向绑定到react这里还要自己写代码，真是的。

再下来就是展示数据了，直接对list进行循环，构造出<tr><td>，渲染到指定div中即可。

好了，今天就到这里，感谢每一位观众，如果需要源码，请在网页底部扫描二维码加微信获取，谢谢。