开发者社区> 前端歌谣> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

#yyds干货盘点# 【React工作记录三十九】ant design控制tag选中的写法

简介: #yyds干货盘点# 【React工作记录三十九】ant design控制tag选中的写法
+关注继续查看

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


歌谣 歌谣 这边需要做一个标签选中功能 于是乎我开始了官方api的研究 一开始准备封装一个组件的后来发现没必要


图片.png

解决思路


<div>
              {tagList &&
                tagList.map((item, index) => (
                  <CheckableTag
                    checked={item.checked}
                    key={index}
                    onChange={(flag) => {
                      this.handleChange(flag, index);
                    }}
                  >
                    {item.tagValue}
                  </CheckableTag>
                ))}
            </div>


总结要点


两步步走

1引入

import { Tag } from 'antd'; const { CheckableTag } = Tag;

2定义

<CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />

3直接在所在的位置加入值即可 则代码实现




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
react 在工作中边用边学
react 笔记 react 单向数据传递 1.父组件通过 props 传递给子组件,子组件通过this.props 可以拿到所有父组件传过来的值 ,拿到单独值通过this.props.XX 2. this.
987 0
react native 实现图片预览 图片保存 react-native-image-zoom-viewer
图片 预览,和保存 功能 应该是很常见的APP 功能 。实现起来也很简单。 这里用到的组件是:https://github.com/ascoders/react-native-image-viewer 看下新效果图: [图片上传中.
5706 0
React Native 教程:001 - 如何运行官方控件示例 App
原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置。原文发表于我的技术博客 React Native 以及示例 App 简介 关于 React Native 的简要介绍。
1022 0
React Native系列(6) - 编译安卓私有React-Native代码
为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Native HTTP2 issue How to build private build 由于时间紧急,发布期限已经拖了好久了,没法等待官方解决方案,只能在本地做修复然后发布。
1745 0
React Native中添加Base64支持
最近极客人在使用React Native制作的自己的博客客户端,客户端在调用Wordpress Rest API时有些操作需要使用HTTP认证,而HTTP认证中主要就是在HTTP请求中的头部加入 "Authorization"字段,Authoriza...
1031 0
android 添加React Native支持
官方文档 英文官方文档 中文官方文档 个人实践 用android studio创建一个基本的android hello world程序 2016-09-28_172701.png 在项目根目录中通过npm向导生成package.json文件,在cmd中输入命令:npm
3559 0
+关注
前端歌谣
csdn账号前端大歌谣/前端小歌谣 微信公众号关注前端小歌谣
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
React Native项目实战优化之路
立即下载
React在大型后台管理项目中的工程实践
立即下载