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. caffe 下一些参数的设置

    weight_decay防止过拟合的参数,使用方式:1 样本越多,该值越小2 模型参数越多,该值越大一般建议值:weight_decay: 0.0005 lr_mult,decay_mult关于偏置与 ...

  2. laravel 授权使用gate门类

    第一:先注册 第二:使用方式三种 路由中:Route::group(['middleware'=>'can:system'],function() {}) 模板中:@can("syst ...

  3. ifram子页面与父页面的方法相互调用

    parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. [全+转载] solaris 网络配置

    ===================== 较为重要的几个文件: /etc/nodename                      主机名(即 hostname命令的输出) /etc/defaul ...

  5. Python 3里,reduce()函数已经被从全局名字空间里移除了,它现在被放置在fucntools模块里

    reduce函数:在Python 3里,reduce()函数已经被从全局名字空间里移除了,它现在被放置在fucntools模块里 用的话要 先引入:>>> from functool ...

  6. 【codeforces 764B】Timofey and cubes

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  7. mysql 修改列为not null报错Invalid use of NULL value

    场景:mysql 给表新增parent_id列,并设置为not null,保存时报错Invalid use of NULL value. 报错原因:因为已存在的数据的parent_id列为null,与 ...

  8. javascript异步编程 Async/await

    Async/await Async/await 在学习他之前应当补充一定的 promise 知识 它是一种与 promise 相配合的特殊语法,目前被认为是异步编程的终级解决方案 值得我们每一个人学习 ...

  9. 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 ...

  10. Linux 内核kobject非 缺省属性

    在许多情况中, kobject 类型的 default_attrs 成员描述所有的 kobject 会拥有的属性. 但是那不是一个设计中的限制; 属性随意可以添加到和删除自 kojects. 如果你想 ...