React入门学习笔记

[墨香年少 32]

1.创建React项目

npx create-react-app my-app

2.添加微软的FlumentUI

yarn add @fluentui/react

或者

npm install @fluentui/react

 

3.添加路由

npm install react-router-dom@5.2.0

4.为了使用ajax

yarn add axios

5.跨组件沟通事件

yarn add pubsub.js

npm install pubsub-js --save

6.使用图表

npm install echarts --save

7.使用md5等加密

npm install crypto-js

8.开启项目

yarn start

9.编译

yaarn build

10.无刷新上传

npm install plupload@2.3.7

 

[墨香年少 32]

关于无刷新上传

npm install plupload@2.3.7

import React, { Component } from 'react';
import { TextField, Label, Toggle, SpinButton, DatePicker, PrimaryButton, Dropdown } from '@fluentui/react';
import PLUPLOAD from 'plupload';

class CreateEvent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            //上传
            uploader: null,
            files: [],
        }
    }

    componentDidMount() {
        let that = this
        this.init_plupload('select_file')
    }

    init_plupload = (BTN_ID) => {
        if (null === this.state.uploader) {
            let uploader = new PLUPLOAD.Uploader({
                runtimes: 'html5',
                browse_button: BTN_ID,
                'url': "http://api.com/file",
                multi_selection: false,
                filters: [{
                    title: 'Image files',
                    extensions: 'jpg,jpeg,png'
                }],
                multipart: 'form-data',
                init: {
                    FilesAdded: (uploader, files) => {
                        uploader.start()
                    },
                    FileUploaded: (uploader, file, info) => {
                        let json_data = JSON.parse(info.response)
                        if (0 === json_data.code) {
                            let files = []
                            files.push({ prefix: json_data.prefix, src: json_data.src })
                            this.setState({
                                files: files
                            })
                            let banner = json_data.src
                            this.setState({ event: Object.assign({}, this.state.event, { banner: banner }) })
                        } else {
                            this.alert(json_data.msg)
                        }
                    },
                }
            })
            uploader.init();
            this.setState({
                uploader: uploader
            })
        }
    }

    //格式化日期
    dateFormat(fmt, date) {
        if ('undefined' === date || 'undefined' === typeof (date)) {
            return null;
        }
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k] + '') : ('00' + opt[k]).substr(-ret[1].length))
            }
        };
        return fmt;
    }
    formatDate = (_date) => {
        if ("20" === _date.toString().substring(0, 2)) {
            return _date.toString();
        }
        return this.dateFormat("YYYY-mm-dd", _date)
    }

    Date1Ref1 = (ref1) => {
        if (null === this.state.date_ref1) {
            this.setState({
                date_ref1: ref1
            })
        }
    }

    //设置名称
    set_name = (e) => {
        let that = this
        let name = e.target.value
        that.setState({ event: Object.assign({}, this.state.event, { name: name }) })
    }


    submit_form = (e) => {
        let that = this

        if ("" === that.state.event.name) {
            that.alert({ content: "请输入名称" })
        }
        else if ("" === that.state.event.banner) {
            that.alert({ content: "请上传一个banner" })
        }
        else if ("" === that.state.date_ref1 || "" === that.state.date_ref2) {
            that.alert({ content: "请选择日期范围" })
        }
        else {
            Ajax("event", {
                act: 'create',
                userid: window.user.userid,
                event: JSON.stringify(that.state.event)
            }, function (json) {
                if (0 !== parseInt(json.code)) {
                    that.alert(json.msg)
                }
                else {
                    PubSub.publish("WM", { NAME: "WM_CREATED_EVENT", ID: json.id }) //刷新列表
                }
            })
        }
    }

    render() {
        return <div>
            <div className='form'>
                <div className='row mt15'>
                    <TextField onChange={this.set_name} label="名称" value={this.state.event.name} />
                </div>
                <div className='row mt15'>
                    <Label>图标</Label>
                    <div className="weui-uploader__bd">
                        {
                            this.state.files.length > 0 ? <ul className="weui-uploader__files">
                                {
                                    this.state.files.map((file) => {
                                        return <li className="weui-uploader__file" key={file.src}>
                                            <img src={file.prefix + file.src} alt="" />
                                        </li>
                                    })
                                }
                            </ul> : ""
                        }
                        <div className="weui-uploader__input-box">
                            <input id="select_file" className="weui-uploader__input" type="text" />
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>

                <div className='row mt15'>
                    <PrimaryButton onClick={this.submit_form} text="提交" />
                </div>
            </div>
        </div>;
    }
}

export default Create;