react学习

react相关的组件APIhttps://ant.design/components/card-cn/#目录结构#我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。├── config # umi 配置，包含路由，构建等配置├── mock # 本地模拟数据├── public│ └── favicon.png # Favicon├── src│ ├── assets # 本地静态资源│ ├── components # 业务通用组件│ ├── e2e # 集成测试用例│ ├── layouts # 通用布局│ ├── models # 全局 dva model│ ├── pages # 业务页面入口和常用模板│ ├── services # 后台接口服务│ ├── utils # 工具库│ ├── locales # 国际化资源│ ├── global.less # 全局样式│ └── global.ts # 全局 JS├── tests # 测试工具├── README.md└── package.json本地开发#安装依赖。npm install如果网络状况不佳，可以使用 tyarn 进行加速。npm startconfig.ts路由的配置{ path: ‘/dataTransmission’, name: ‘数据传输’, icon: ‘home’, showHasProjectId:‘true’, routes: [ { path: ‘/dataTransmission/dataSynchronization’, name: ‘数据同步’, component: ‘./dataTransmission/dataSynchronization/index’ }, { path: ‘/dataTransmission/dataSynchronization/add’, name: ‘创建同步作业’, hideInMenu: true, component: ‘./dataTransmission/dataSynchronization/dataSynchronizationAdd’ }, { path: ‘/dataTransmission/dataMigration’, name: ‘数据迁移’, component: ‘./dataTransmission/dataMigration/index’ } ] }import React from ‘react’;import { PageHeaderWrapper } from ‘@ant-design/pro-layout’;import styles from ‘…/public/public.less’;import { Table, Input, Button, Form, Select,Row,Col,message,Modal} from ‘antd’;import {userGetFind,projectMemberJobcreateBatch,projectMemberJobFind,projectMemberJobDelete} from ‘@/services/data’; //数据import LayoutTable from ‘@/components/LayoutTable’; // 引入自封装的表格和分页组件const { Column, ColumnGroup } = Table;const { confirm } = Modal;// 添加成员 addMember(){ this.setState({ visible: true//通过这个参数来控制是否是弹出框 }) }添加成员Modal visible={this.state.visible} //创建 调用方法 createFun(){ this.props.history.push({ pathname: ‘/dataTransmission/dataSynchronization/add’ }) } //重新配置 editFun(record){ this.props.history.push({ pathname: ‘/dataTransmission/dataSynchronization/add’, query: { id: record.id } }) } //详情 viewFun(record){ this.props.history.push({ pathname: ‘/dataTransmission/dataSynchronization/view’, query: { id: record.id } }) } // 启动同步 startFun(record){ synchronizationJobStartJob({ id: record.id }).then((res)=>{ console.log(res); if(res.id >0){ message.success(“同步成功”); this.getTableData(); } }) }//遍历集合 for(let i in res.result){ let creationTime = Number(res.result[i].creationTime); res.result[i].creationTime = date.formatTime(creationTime); }

//
let Arr = [];
for(let i in resultArr){
Arr.push({
sourceDatabaseName: resultArr[i],
targetDatabaseName: resultArr[i],
tableList:[]
});
for(let j in ArrLeft){
if(resultArr[i] === ArrLeft[j]){
console.log(resultArr[i] + ‘,’ + ArrRight[j]);
Arr[i].tableList.push({
sourceTableName: ArrRight[j],
targetTableName: ArrRight[j],
})
}
}
}
console.log(Arr);
const current = this.state.current + 1;
this.setState({
current,
dataBase: Arr
})
import {Table,Input,Button,Form,Select,Row,Col,Modal,Progress,message} from ‘antd’;
import LayoutTable from “@/components/LayoutTable”;
import date from ‘…/…/public/date’;
const { confirm } = Modal;
class Index extends React.Component{
constructor(props){
super(props);
}
state = {
dataSourceTab: [],
// 分页用到的参数
vm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0,
},
visible: false, // 预检查
checkDataTable: [],
};
// 第一次渲染后调用
componentDidMount(){
this.getTableData();
}
// 查询列表数据
getTableData = () => {
let pageNumber = this.state.vm.pageNumber;
let pageSize = this.state.vm.pageSize;
let data = {
pageNumber: pageNumber,
pageSize: pageSize,
projectId:sessionStorage.getItem(‘projectId’),
};
this.props.form.validateFields((err, values) => {
// console.log(values);
if (!err) {
data.name = values.name;
data.syncStatus = values.syncStatus;
// console.log(data);
synchronizationJobFind(data).then((res) => {
console.log(res);
if(res!==undefined){
// 时间戳转化
for(let i in res.result){
let creationTime = Number(res.result[i].creationTime);
res.result[i].creationTime = date.formatTime(creationTime);
}
this.setState({
dataSourceTab: res.result,
vm: {
…this.state.vm,
totalCount: parseInt(res.totalCount),
},
});
}
});
}
});
};
// 分页操作
handlePageChange(pageNumber: any, pageSize: any) {
this.setState({
vm: {
…this.state.vm,
pageNumber: pageNumber,
pageSize: pageSize,
},
},() => {
this.getTableData();
},
);
}
// 设置分页大小
onShowSizeChange(current: any, size: any) {
this.setState({
vm: {
…this.state.vm,
pageNumber: 1,
pageSize: size,
},
},() => {
this.getTableData();
},
);
}

getTableData = (keyword?: any) => {
let pageNumber = this.state.vm.pageNumber;
let pageSize = this.state.vm.pageSize;
let data = {
pageNumber: pageNumber,
pageSize: pageSize,
projectId:sessionStorage.getItem(‘projectId’),
};
this.props.form.validateFields((err, values) => {
if (!err) {
data.userName = values.name;
data.roleCode = values.roleCode;
projectMemberJobFind(data).then((res) => {
console.log(res);
if (res !== undefined) {
this.setState({
dataSourceTab: res.result,
vm: {
…this.state.vm,
totalCount: parseInt(res.totalCount),
},
})
}
});
}
});
}

// 添加成员
addMember(){
this.setState({
visible: true
})
}
// 确定
handleOk = e =>{
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(this.state.choseMemberData);
projectMemberJobcreateBatch({
memberList: this.state.choseMemberData
}).then((res)=>{
if(res.id !== ‘’){
message.success(“新增成功！”);
this.setState({
visible: false,
account: ‘’
});
this.getTableData();
}
})
}
})
};

// 获取成员
userFindFun(){

    userGetFind({
        isActive : true ,
        pageSize: 0,
        sourceType: 'EMPLOYEE'
    }).then((res)=>{
        console.log(res);
        //  删除相同的name
        let hash = {};
        let arr = [];
        arr =  res.result.reduce(function(item, next) {
            hash[next.name] ? '' : hash[next.name] = true && item.push(next);
            return item
        }, []);
        let accountArr = [];
        let idArr = [];
        for(let i in arr){
            accountArr.push(arr[i].account);
            idArr.push(arr[i].id);
        }
        this.setState({
            memberResult: arr
        })
    })
}
//  取消
handleCancel(){
    this.setState({
        visible: false
    })
}

// helloWorld.jsx
//测试案例1
import React, { Component } from ‘react’;

class HelloWorld extends Component {
state = {
switch: 0,
name: this.props.name1
}

clickHander = () => {
    const { name1, name2 } = this.props;

    if (this.state.switch === 0) {
        console.log(name1);
        this.setState({
            switch: 1,
            name: name2
        })
    } else {
        console.log(name2);
        this.setState({
            switch: 0,
            name: name1
        })
    }
}

render () {
    return (
        
{ this.state.name } say: Hello World!
    )
}

}

export default HelloWorld;

//测试案例2
import React, { Component } from ‘react’;
import Button from ‘./Button’;
import Dialog from ‘./Dialog’;
import ‘./style.css’;

class App extends Component {
state = {
loading: false,
dialog: false,
message: ‘xxx’
}

submit = () => {
    this.setState({
        loading: true
    })

    // 模拟数据请求的过程，假设数据请求会经历1s得到结果
    setTimeout(() => {

        // 通过随机数的方式模拟可能出现的成功与失败两种结果
        const res = Math.random(1);
        if (res > 0.5) {
            this.setState({
                dialog: true,
                message: '提交成功！'
            })
        } else {
            this.setState({
                dialog: true,
                message: '提交失败！'
            })
        }
        this.setState({ loading: false })
    }, 1000)
}

close = () => {
    this.setState({
        dialog: false
    })
}

render () {

    const { loading, dialog, message } = this.state;

    return (
        

            提交
            { dialog && 
 }
        
    )
}

}

export default App;

//测试案例3
import React,{ Component } from ‘react’
import demo1Image from ‘…/…/image/demo1Image.jpg’;
class Home extends Component {
render() {
return (

这是第一个demo


)
}
}
export default Home

//测试案例4
import React,{ Component } from ‘react’
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:“js是世界上最好的语言”
};
}
render() {
return (

{this.state.data}

)
}
}
export default Home

react.js的变量可以定义在state这个json对象中，接着把state这个json对象绑定在this上。
调用方式是：在dom树中需要用到的地方以{this.state.}方式进行使用。
定义类型const

import React,{ Component } from ‘react’
class Home extends Component {
render() {
let data=“js是世界上最好的语言”;
return (

{data}

)
}
}
export default Home

const map = new Map();
map.set(‘first’, ‘hello’);
map.set(‘second’, ‘world’);

for (let [key, value] of map) {
console.log(key + " is " + value);}

//aiax
$.ajax({
//几个参数需要注意一下
type: “POST”,
//方法类型
dataType: “json”,
//预期服务器返回的数据类型
url: “/users/login” ,
//url
data: $(’#form1’).serialize(),
success: function (result) {
console.log(result);
//打印服务端返回的数据(调试用)
if (result.resultCode == 200) { alert(“SUCCESS”); }
},
error : function() { alert(“异常！”); } });

JSON.stringify()//json数据
JSON.parse(item1) //解析json数据

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

for循环的计数器，就很合适使用let命令。
let idArr =[]
for(let i=0;i

}
for(let i in arr){
idArr.push(arr[i])
}
this.setState({//设置全局变量
ids:idArr
})

let value = this.state.ids;//获取全局变量

在render取值
{this.state.ids}

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const { confirm } = Modal;

你也可以通过 query 字符串来访问参数。比如你访问 /foo?bar=baz，你可以通过访问 this.props.location.query.bar 从 Route 组件中获得 “baz” 的值。
//创建
createFun(){
this.props.history.push({
pathname:’/datemanagement/add’
})
}

//更新
editFun(record){
this.props.history.push({
pathname:’/datemanagement/add’,
query:{
id:record.id
}
})
}

//启动
startFun(record){
startJob({//调后天接口
id:record.id
}).then((resp)=>{
if(resp.id!==undefined{
message.success("sdf”)
}
})
}

//弹出框
addFun(){
this.setState({
visible:true
})
}

// 确定
handleOk = e =>{
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(this.state.choseMemberData);
projectMemberJobcreateBatch({
memberList: this.state.choseMemberData
}).then((res)=>{
if(res.id !== ‘’){
message.success(“新增成功！”);
this.setState({
visible: false,
account: ‘’
});
this.getTableData();
}
})
}
})
};
//取消
handleCancel（）{
this.setState({
visible: false
})
}
// 获取成员
onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}
footer={[
取消,
确定,
]}
>