项目体系说明:react+mobx+antd

11. state设置对象属性

 this.setState({
tableParams:{tableName:value}
})

10.loading组件设置

this.setState({
title: Utils.trim(query.title),
loading:true,
}); this.props.articleService.findPage(query, true)
.then(data => this.setState({loading: false}))
.catch(e => this.setState({loading: false}));

9.模态框弹出时,需要传递参数应该怎么设置?

showModal = (obj,b) => {

    this.setState({
visible: true,
oldTopicId: obj.id,
});
console.log("a==============" ,obj); console.log("b==============" ,b);
// 获取主题词下所有关键词的id集合
const myParams = {};
myParams.topicId = obj.id;
this.topicState.getKeyWordIds(myParams);
}; //---------------------------------------------------------------------------
const columns = [{
title: '主题',
dataIndex: 'name',
key: 'name',
}, {
title: '关键词',
dataIndex: 'keywords',
key: 'keywords',
render: (item) => item ? item.join(',') : ''
}, {
title: '操作',
key: 'operation',
render: (_, record) => (
<div>
<Link to={`/topic/${record.id}`}><Icon type="edit"/>编辑</Link>
<span className="ant-divider"/>
<a className="fgw-text-error" onClick={this.showModal.bind(this, record)}><Icon type="delete"/>删除</a> </div>)
}];

8.当切换路由后(切换了左侧导航栏后),用户在返回之前查询的结果界面,结果界面还会展示上一次的结果,应该如何处理呢?

//第一步
componentWillUnmount() {

  this.props.store.docClassifyState.clearClassifyResult();
}

//第二步,在对应的state里面写一个清空数据源的函数 /* * 清空已有的数据源 * */
clearClassifyResult(){
this.setClassifyResult({});
}

7.Input.Search组件下,如何配合分页组件传递搜索框中的参数

constructor(props) {
super(props);
this.state = {
params: '',
};
this.store = this.props.store.websiteState;
} const paginationProps = {
pageSize: size || 0,
currentPage: number || 0,
totalElements: totalElements || 0,
showSizeChanger: true,
onChange: (page, size) => {
this.store.getWebsitePage({page, size, name: this.state.params});
}
}; <Input.Search placeholder="输入网站名称或网址进行搜索"
onSearch={value =>{
if (value === this.state.params) {
return
}
this.setState({params: value});
this.store.getWebsitePage({name: value})
}}/>

6.需要更新用户信息时,需要把用户原来的信息一起传回给后台,这个时候推荐下面的写法,首先

this.userState.user这个是数据源,然后...values 这个是表单中变化的值,通过新的值来覆盖旧的值,达到更新数据的操作。
if (tag === 'user') {
this.userState.updataUser({...this.userState.user,...values});//更新用户信息
}

5.业务场景:当用户添加一条数据,比如添加一个用户,但是用户名已经存在了,这个时候需要提示给用户并停留在当前的编辑界面,当操作成功后,跳转到table列表界面上

主要说明两点,其一异步操作,其二,state里面注意需要添加 return date的操作:

//state
//修改一条数据
async updataRoom(value) {
const {data} = await request(
{
method: 'put',
url: '/api/room',
data: value
},
{message: '保存成功'},
{message: '保存失败'},
);
this.setRoom(data);
return data;//重要
} //异步调用 handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
if (this.isAdd()) { //新增
this.roomState.createRoom(values).then((response)=> {
              //取到后台的返回 response 根据其中一个不为空的值做判断条件
const {status} = response;
debugger;
console.log('response',status);
if(status){
Utils.goBack();
}
}) } else {
values.roomId = this.props.match.params.id;
console.log('values of form: ', values);
this.roomState.updataRoom(values).then((response)=> {
console.log('response',response);
const {status} = response;
if(status){
Utils.goBack();
}
}); //修改
} }
});
};

4.执行删除操作后,界面重新查询一次,就是把删除后的效果呈现出来的操作模式

  /*
* 根据主机Id删除主机
* /api/host/{hostId}
* */
async deleteRemoveHost(hostId,cabinetId) {
const {data} = await request(
{method: 'DELETE', url: `/api/host/${hostId}/remove`},
{message: '移除成功'},
{message: '移除失败'},
);
this.getCabinetHost(cabinetId);
} }

3.当state状态发生改变会引发界面的重绘,即使数据改变会实现界面的重新渲染。这个思想比较重要,做说明一下(

this.setState({host: host});

)

constructor(props) {
super(props);
this.state ={
cabinetId: '',
hostId: '',
host:{},
};
this.cabinetState = this.props.store.cabinetState;
} /*
* 用户点击主机后,取出主机的详细信息展示在右侧
* */
handleClick = (host) =>{
console.log('主机参数',host);
this.state.host = host;
this.setState({host: host});
this.state.hostId = host.hostId;
console.log('当前主机',this.state.host.hostId);
//this.renderParameter(host)
}; renderParameter =()=>{
const hostObj = this.state.host;
if(hostObj === null || hostObj ===undefined || !hostObj.hostId){
return <div><h3 className="fgw-margin-bottom-20">请点击右侧主机,可查看主机的详情信息</h3></div>
}
console.log('主机参数',hostObj);
console.log('服务参数', eval('('+hostObj.info+')'));
//console.log('服务参数', JSON.stringify(hostObj.infos));
//console.log('服务参数', JSON.parse(hostObj.infos)); const info = eval('('+hostObj.info+')');
return(
<div>
<Col span={12}>
<label className="hl-font-20">设备名称:</label>
<span>{hostObj.hostId}</span>
</Col>
</div> )
)
};
  1. react提交按钮响应回车事件(基于react+Mobx的实现模式)

    handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
    if (!err) {
    console.log('Received values of form: ', values);
    if (e.keyCode == 13)//回车键的键值为13
    {
    e.returnValue=false;
    e.cancel = true;
    this.store.getPolicyPage(values);//调用按钮的事件
    }
    this.store.getPolicyPage(values);
    }
    });
    };
  2. renderHotFont =()=>{
    const hotFont = this.store.wordList;
    console.log("wordList",this.store.wordList);
    console.log("systemList",this.store.systemList.value); /*const sysList = [];
    for (itme of this.store.systemList){ }*/ const sysList = this.store.systemList.map(function (item) {
    return (item.value);
    });
    let myList = [];
    if(sysList.length > 0){//做非空判断
    myList = sysList[0].split(',');//字符串转成数组
    } if (!this.store.systemList) {
    return <div style={{textAlign: 'center', paddingTop: '30px'}}>暂无关键词</div>
    }
    return myList.map(doc => {
    const keyWord = this.store.wordList.find(temp => temp.id === doc);//从所有的关键词中获取对应的名字
    debugger;
    return (<div className="fgw-word">{keyWord.name}</div>)
    }); /*if (!this.store.wordList) {
    return <div style={{textAlign: 'center', paddingTop: '30px'}}>暂无关键词</div>
    }
    return this.store.wordList.map(doc => {
    return (<div className="fgw-word">{doc.name}</div>)
    });*/
    };
  3. //日期比较大小(开始时间不能大于结束时间约束)
    
    let params = {};
    params.startTime = values.startTime.format('YYYY-MM-DD');
    params.endTime = values.endTime.format('YYYY-MM-DD');
    console.log('开始时间', params);
    if(Date.parse(params.endTime) - Date.parse(params.startTime) <= 0){
    Modal.error({//使用模态框的error模式,需要引入对应的组件
    title:'提示消息',
    content:'开始时间不能大于结束时间'
    });
    return;
    }

react 问题记录二(侧重于state或者说server层操作)的更多相关文章

  1. React学习记录二

    环境基本弄清楚了以后,开始总会写个hello world什么的,开发做了这么久了,就跳过这一步吧. 还是从打开vscode说起吧,这里文件菜单打开一个文件夹Demos,查看菜单打开集成终端,也可以使用 ...

  2. 前端常用功能记录(二)—datatables表格(转)

    前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...

  3. Material Calendar View 学习记录(二)

    Material Calendar View 学习记录(二) github link: material-calendarview; 在学习记录一中简单翻译了该开源项目的README.md文档.接下来 ...

  4. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

  5. React文档(六)state和生命周期

    想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...

  6. react基础语法(四) state学习

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  8. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  9. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

随机推荐

  1. C#程序保存dump文件

    作用 程序异常崩溃前使用此类为进程创建DUMP文件,之后可以使用WinDbg等工具进行分析. 辅助类代码 using System; using System.Diagnostics; using S ...

  2. vector rIterator

    #include<vector> #include<iostream> using namespace std; void main() { vector<int> ...

  3. cronicle docker 运行试用

    Cronicle 是一款基于nodejs 开发的分布式任务调度工具,包含了比较全的UI,使用也比较简单,为了 方便学习,简单制作了一个docker 镜像,方便使用 Dockerfile   FROM ...

  4. 08-图8 How Long Does It Take (25 分)

    Given the relations of all the activities of a project, you are supposed to find the earliest comple ...

  5. ubuntu16.04 用devstack部署安装OpenStack ocata

    原文链接 之所以再重复一下,是因为踩坑的过程,希望能帮助有需要的人. 介绍:        宿主机win10,在vmware下创建两台ubuntu16.04虚拟机,一台作为控制节点,一台作为计算节点, ...

  6. 【转】目前为止最透彻的的Netty高性能原理和框架架构解析

    转自:https://zhuanlan.zhihu.com/p/48591893 1.引言 Netty 是一个广受欢迎的异步事件驱动的Java开源网络应用程序框架,用于快速开发可维护的高性能协议服务器 ...

  7. python skimage图像处理(一)

    python skimage图像处理(一) This blog is from: https://www.jianshu.com/p/f2e88197e81d 基于python脚本语言开发的数字图片处 ...

  8. MySQL索引原理(二)

    MySQL索引原理 1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中.索引是数据库中专门用于帮助用户快速查询数据的一种数据结构. ...

  9. [SQL]用于提取组内最新数据,左连接,内连接,not exist三种方案中,到底谁最快?

    本作代码下载:https://files.cnblogs.com/files/xiandedanteng/LeftInnerNotExist20191222.rar 人们总是喜欢给出或是得到一个简单明 ...

  10. yum -y install pip No package pip available. Error: Nothing to do

    centos下安装pip时失败: [root@wfm ~]# yum -y install pipLoaded plugins: fastestmirror, refresh-packagekit, ...