react-ant-design实现Modal输入框实现联想输入
发布日期:2021-05-20 10:06:23 浏览次数:21 分类:技术文章

本文共 683 字,大约阅读时间需要 2 分钟。

1、预期实现效果在这里插入图片描述

2、核心代码

{
opinionList.map((item,index)=>{
return(
{
item.content}
) })}

3、代码已经贴出

-首先需要看的是如何控制下拉选择框的出现与隐藏

在这里我们是通过绑定样式进行控制的

this.state = {
content : '', ideaList: {
display: "none" }, }

当符合条件出现的时候我们进行更新状态

this.setState({
ideaList:{
display:'block'} })
  • 在这里我们使用onMouseDown来控制当鼠标按下的事件触发,并进行了this绑定

    事件方法因人而异,这里就不再具体贴出。

  • 获取联想输入的值

    首先先进行初始化
    在这里插入图片描述
    选择方法

chooseContent = (content) =>{
this.setState({
content, ideaList:{
display:'none'} }) }

转载地址:https://blog.csdn.net/weixin_45416217/article/details/104001920 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:react-ant-design中用到的数组遍历迭代方法forEach和map方法案例区分说明
下一篇:react-ant-design带有下拉框选择的搜索功能实现详解(表格组件的使用)

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月11日 07时53分20秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

android java加密_android 和java平台通用的AES加密解密 2019-04-21
java导出类_java导出excel工具类 2019-04-21
java学习手册下载_Java学习手册 2019-04-21
axios delete有请求体吗_关于axios请求——delete方法 2019-04-21
java 自助更改密码 api_搭建ldap自助修改密码系统--Self Service Password 2019-04-21
php继承exten,stylus中文文档 » 继承(@extend) » 张鑫旭-鑫空间-鑫生活 2019-04-21
mysql函数大全 pdf,MySQL函数大全 2019-04-21
php 常用文件系统函数,php 文件系统函数整理介绍 2019-04-21
android pm.java,java – AM / PM的Android DateFormat因设备而异 2019-04-21
oracle存储过程调用sql文件,oracle - 在SQL Developer中运行存储过程? 2019-04-21
oracle同时报604和12507,V$SES_OPTIMIZER_ENV 查不到刚修改的隐含参数, 2019-04-21
zblog的php更换域名,zblogphp更换域名后,原zblog里使用了固定域名,登录不进去怎么办... 2019-04-21
oracle dnfs 配置,Source of Oracle参数解析(dnfs_batch_size) - django-\/\/ i K | 2019-04-21
oracle所需的环境,转:面对一个全新的oracle环境,首先应该了解什么? 2019-04-21
linux 小数四则运行,shell四则运算(整数及浮点数)的方法介绍 2019-04-21
linux系统分区后进入紧急模式,Linux系统的救援模式应用详解 2019-04-21
linux配置匿名ftp服务器,在Linux环境中使用vsftpd搭建ftp实现匿名上传详细配置 2019-04-21
linux创建硬盘分区lvm,LVM创建及分区调整、更换LVM硬盘 2019-04-21
FreeBSD可以安装Linux软件吗,在Linux服务器上面通过网络安装FreeBSD 2019-04-21
.net core linux 桌面应用,C# dotnet core + AvaloniaUI 开发桌面软件,hello world 2019-04-21