Ant Design中根据用户交互展示不同的标签
Ant Design中根据用户交互展示不同的标签
Ant Design使用的是React框架,那么我们先看代码:
<Fragment>
<a onClick={() => this.viewDetail(obj)}>查看</a>
<Divider type="vertical" />
<a onClick={() => this.handelUpdate(obj)}>修改</a>
<Divider type="vertical" />
<a onClick={() => this.handleDelete(obj)}>删除</a>
<Divider type="vertical" />
{obj.recommend == 0 ? (
<a onClick={() => this.handleRecommend(obj)}>设为推荐</a>
) : (
<a onClick={() => this.handleRecommend(obj)}>取消推荐</a>
)}
</Fragment>
不用管头三个a标签,最后我写了两个a标签,他们根据obj中的“recommend”变量值进行动态的变化。值得说明的是,我并没有在这个页面设置自己的state,所以我在改变这个值后,页面是不会重新渲染的,也就是说,该a标签不会自动变换。
注意:React的机制是,只有当前页面(组件)的state数据发生变化,或父组件的state数据发生变化,才会重新渲染页面(组件)
解决方案
在前面的随笔中提到过,models即相当于是当前页面的父组件,那么既然我不想在当前页面的state中定义数据,那么我可以相应的models中改变state数据,这样也能实现页面的重新渲染。
*apiSetRecommend({ payload }, { call, put }) {
const response = yield call(apiSetRecommend, payload);
if (isResponseSuccess(response)) {
message.success('设置成功');
yield put({
type: 'setRecommend',
payload: payload.activityId,
});
} else {
message.error('设置失败:' + response.data.message);
}
},
*apiRemoveRecommend({ payload }, { call, put }) {
const response = yield call(apiRemoveRecommend, payload);
if (isResponseSuccess(response)) {
message.success('设置成功');
yield put({
type: 'removeRecommend',
payload: payload.activityId,
});
} else {
message.error('设置失败:' + response.data.message);
}
}
(1)在models的effects中写出相应要调用的接口。
(2)如果操作成功,则需要使用yield put转到reducers中进行处理。
setRecommend(state, action) {
for (var i = 0; i < state.list.length; i++) {
if (state.list[i].id === action.payload) {
state.list[i].recommend = 1;
}
}
return {
...state,
};
},
removeRecommend(state, action) {
for (var i = 0; i < state.list.length; i++) {
if (state.list[i].id === action.payload) {
state.list[i].recommend = 0;
}
}
return {
...state,
};
}
因为当前页面是一个table,即数据源是一个list,所以我需要在list中查找到相应的数据,并改变他的state数据。最后最重要的就是一定要return这个state,这样才能使绑定该models的页面进行页面重新渲染。
Ant Design中根据用户交互展示不同的标签的更多相关文章
- Ant Design中getFieldDecorator方法的特殊用法(小bug)
记录Ant Design中getFieldDecorator方法的特殊的一个用法 了解Ant Design表单的小伙伴都知道,getFieldDecorator在大部分情况下是用来绑定一个控件的,即像 ...
- 4.python中的用户交互
学习完如何写'hello world'之后,我们还是不太满意,因为这样代码就写死了,以后运行的时候都只打印一局固定的话而已. 但是,我想在程序运行后,自己手动输入内容怎么办,此时就要学习如何使用用户交 ...
- ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
- ant design 中的 Select 组件常规写法
1.代码 import { Select, Spin } from 'antd'; const Option = Select.Option; <Select allowClear showSe ...
- Ant Design中的Form组件
1. 使用Form.create()包裹过的组件可以获取到this.props.form属性 Form.create()(Comp) 2. getFieldDecorator() // 在表单中的使用 ...
- 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用
一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design. ...
- ant.design初探
第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...
- 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法
先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...
随机推荐
- Duplicate keys detected: '0'. This may cause an update error.
在运行vue项目的时候报了:[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error(错误,检测到重复的key值 ...
- C# Brush Color String 互相转换
using System.Windows.Media; //String转换成Color Color color = (Color)ColorConverter.ConvertFromString(s ...
- H3C 常见ISDN连接方式
- 2005年NOIP普及组复赛题解
题目涉及算法: 陶陶摘苹果:入门题: 校门外的树:简单模拟: 采药:01背包: 循环:模拟.高精度. 陶陶摘苹果 题目链接:https://www.luogu.org/problem/P1046 循环 ...
- 用复制方式创建表 Create Table tbname as select * from user.tab where ...
用复制方式创建表 Create Table tbname as select * from user.tab where ...
- 深入java面向对象一:==和equals详解
本文从多篇博客笔记融合而来,系转载,非原创,参考: 1. http://www.cnblogs.com/e241138/archive/2012/09/16/2687981.html 2. htt ...
- 人脸检测MTCNN的训练过程(PRO网络)
以下学习均由此:https://github.com/AITTSMD/MTCNN-Tensorflow 数据集 WIDER Face for face detection and Celeba for ...
- liunx printk 函数消息是如何记录的
printk 函数将消息写入一个 LOG_BUF_LEN 字节长的环形缓存, 长度值从 4 KB 到 1 MB, 由配置内核时选择. 这个函数接着唤醒任何在等待消息的进程, 就是说, 任何在系统 ...
- post提交方式为什么要序列化,而Get提交方式就不用?序列化做了什么?
这是因为后台能够直接处理的数据格式,是一种经过序列化的键值对数据,比如前端要向后台提交三个参数,分别是a=1,b=2,c=3,那么后台接收到的数据就应该是a=1&b=2&c=3(可以看 ...
- CF140CNew Year Snowmen
CF140C 题目大意:堆雪人,需要三个大小不同的雪球,现有\(n\)个给定大小的雪球,问最多堆多少个雪人 一个很明显的思路是把每种雪球出现的个数记录下来,然后直接扔到大根堆里面,每次选择剩下出现次数 ...