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中根据用户交互展示不同的标签的更多相关文章

  1. Ant Design中getFieldDecorator方法的特殊用法(小bug)

    记录Ant Design中getFieldDecorator方法的特殊的一个用法 了解Ant Design表单的小伙伴都知道,getFieldDecorator在大部分情况下是用来绑定一个控件的,即像 ...

  2. 4.python中的用户交互

    学习完如何写'hello world'之后,我们还是不太满意,因为这样代码就写死了,以后运行的时候都只打印一局固定的话而已. 但是,我想在程序运行后,自己手动输入内容怎么办,此时就要学习如何使用用户交 ...

  3. ant design 中实现表格头部可删除和添加

    我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...

  4. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  5. ant design 中的 Select 组件常规写法

    1.代码 import { Select, Spin } from 'antd'; const Option = Select.Option; <Select allowClear showSe ...

  6. Ant Design中的Form组件

    1. 使用Form.create()包裹过的组件可以获取到this.props.form属性 Form.create()(Comp) 2. getFieldDecorator() // 在表单中的使用 ...

  7. 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

    一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点.   二.难点 1. 项目技术选取: ant design. ...

  8. ant.design初探

    第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...

  9. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

随机推荐

  1. Codeforces Round #176 (Div. 1 + Div. 2)

    A. IQ Test 模拟. B. Pipeline 贪心. C. Lucky Permutation 每4个数构成一个循环. 当n为偶数时,n=4k有解:当n为奇数时,n=4k+1有解. D. Sh ...

  2. 1、Python 日期时间格式化输出

    今天帮朋友写自动化脚本,又需要用格式化日期,又忘记怎么写了,还是写到自己博客里面,方便日后需要的时候看一眼吧.So,临时加一篇 Python 的文章. 1.Python的time模块 import t ...

  3. async和await的执行顺序问题

    说明 : 要了解执行顺序,所需要的知识是了解浏览器js运行机制,以及微任务和宏任务的先后顺序.如果你明白了宏任务.微任务,请往下看: async function async1 () { consol ...

  4. Spring Security 5中 PasswordEncoder的使用

    在最新的 Spring Security 5发布版本中, 出于安全性的考虑调整了PasswordEncoder的实现与使用策略. 1.以前常用的实现 StandardPasswordEncoder, ...

  5. 【u201】矩形覆盖

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有N个矩形,矩形的底边边长为1,且均在X轴上,高度给出,第i个矩形的高为h[i],例如h = [3, ...

  6. H3C调试信息输出的例子

  7. router-link-active的作用

    如上图所示,创建了3个路由跳转选项,css实现后的效果如下 ↓↓↓ 当我切换“电影” “影院” “我的” 三个路由选项时,文字由黑色变成红色 此时可用vue自带的 router-link-active ...

  8. ZR提高失恋测2(9.7)

    ZR提高失恋测2(9.7) 网址http://www.zhengruioi.com/contest/392 版权原因,不放题面 A 首先,我们发现对于匹配串\(s\)中所有满足\(s_i \not = ...

  9. 2018-10-23-WPF-使用-Pandoc-把-Markdown-转-Docx

    title author date CreateTime categories WPF 使用 Pandoc 把 Markdown 转 Docx lindexi 2018-10-23 11:35:47 ...

  10. Java虚拟机-字节码执行引擎

    概述 Java虚拟机规范中制定了虚拟机字节码执行引擎的概念模型,成为各种虚拟机执行引擎的统一外观(Facade).不同的虚拟机引擎会包含两种执行模式,解释执行和编译执行. 运行时帧栈结构 栈帧(Sta ...