ant design控制tag选中的写法

53 阅读1分钟

 

目录

前言

导语

解决思路

总结要点


前言

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

导语

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

​编辑

解决思路

   <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直接在所在的位置加入值即可 则代码实现