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虽然也有一些问题或坑,但这些小问题或坑凭 ...
随机推荐
- caffe 下一些参数的设置
weight_decay防止过拟合的参数,使用方式:1 样本越多,该值越小2 模型参数越多,该值越大一般建议值:weight_decay: 0.0005 lr_mult,decay_mult关于偏置与 ...
- laravel 授权使用gate门类
第一:先注册 第二:使用方式三种 路由中:Route::group(['middleware'=>'can:system'],function() {}) 模板中:@can("syst ...
- ifram子页面与父页面的方法相互调用
parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- [全+转载] solaris 网络配置
===================== 较为重要的几个文件: /etc/nodename 主机名(即 hostname命令的输出) /etc/defaul ...
- Python 3里,reduce()函数已经被从全局名字空间里移除了,它现在被放置在fucntools模块里
reduce函数:在Python 3里,reduce()函数已经被从全局名字空间里移除了,它现在被放置在fucntools模块里 用的话要 先引入:>>> from functool ...
- 【codeforces 764B】Timofey and cubes
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- mysql 修改列为not null报错Invalid use of NULL value
场景:mysql 给表新增parent_id列,并设置为not null,保存时报错Invalid use of NULL value. 报错原因:因为已存在的数据的parent_id列为null,与 ...
- javascript异步编程 Async/await
Async/await Async/await 在学习他之前应当补充一定的 promise 知识 它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案 值得我们每一个人学习 ...
- js 中日期2013-08-30或2019-08-24 12:30:00 转换成时间戳,和2019-08-29T02:15:08.000+0000转化为2019-08-29T02:15:08
js 中日期2019-08-24 或2019-08-24 12:30:00 转换成时间戳 首先将它转成date日期类型,然后获取毫秒形式时间戳 let date=new Date("2019 ...
- Linux 内核kobject非 缺省属性
在许多情况中, kobject 类型的 default_attrs 成员描述所有的 kobject 会拥有的属性. 但是那不是一个设计中的限制; 属性随意可以添加到和删除自 kojects. 如果你想 ...