hook+ant design实现input多行编写小案例

简介: hook+ant design实现input多行编写小案例

代码

import { Input } from 'antd';
import React, { useState } from 'react';
const DynamicPage = () => {
    const [inputList, setInputList] = useState<string[]>(['']);
    const handleInputChange = (e: any) => {
        console.log('e', e.target.value, e.target.id);
        let temp = JSON.parse(JSON.stringify(inputList));
        temp[Number(e.target.id)] = e.target.value;
        if(temp[temp.length - 1] !== ''){
            temp.push('');
        }
        setInputList(temp);
    }
    return(
        <div>
            {
                inputList && inputList.map((it, idx) => {
                    return(
                        <Input id = {idx.toString()} value = {it} onChange={handleInputChange}></Input>
                    )
                })
            }
        </div>
    )
        }
export default DynamicPage;

效果

image.png

相关文章
|
供应链 双11
老客GMV占比增长至60%,服企如何进行会员运营
老客GMV占比增长至60%,服企如何进行会员运营
324 0
老客GMV占比增长至60%,服企如何进行会员运营
|
机器学习/深度学习 数据采集 算法
大数据分析案例-基于随机森林模型对北京房价进行预测
大数据分析案例-基于随机森林模型对北京房价进行预测
1273 0
大数据分析案例-基于随机森林模型对北京房价进行预测
|
机器学习/深度学习 人工智能 API
LabVIEW AI开发者福音:LabVIEW OpenVINO AI加速工具包,不来看看?
LabVIEW AI开发者福音:LabVIEW OpenVINO AI加速工具包,不来看看?
647 1
LabVIEW AI开发者福音:LabVIEW OpenVINO AI加速工具包,不来看看?
|
监控 关系型数据库 MySQL
MySQL 5.7在高并发下性能劣化问题的详细剖析
TL;DR MySQL 5.7高并发读写混合场景下rt飙升,业务系统大量超时报错。本文总结了阿里业务场景下遇到的坑,剖析问题背后的原因,帮助读者更好的理解MySQL内核原理,降低升级MySQL 5.7的风险。
10096 0
|
运维 Kubernetes Cloud Native
【云原生-DevOps】企业级DevOps平台搭建及技术选型-CICD篇(一)
【云原生-DevOps】企业级DevOps平台搭建及技术选型-CICD篇(一)
1514 0
【云原生-DevOps】企业级DevOps平台搭建及技术选型-CICD篇(一)
|
11月前
|
监控 Java Python
Java 中的正则表达式
正则表达式是Java中强大的文本处理工具,支持灵活的匹配、搜索、替换和验证功能。本文介绍了正则表达式的语法基础及其在Java中的应用,包括字符串匹配、替换、分割及实际场景中的邮箱验证和电话号码提取等示例。通过这些技术,可以显著提高文本处理的效率和准确性。
600 8
|
前端开发 JavaScript
图片区域点击处理
【10月更文挑战第25天】在前端开发中,图片区域点击处理可通过 HTML、CSS 和 JavaScript 实现。首先创建包含图片的 HTML 元素,使用 CSS 调整样式,再通过 JavaScript 获取图片元素并添加点击事件监听器,根据点击坐标判断区域,实现特定功能。也可借助 Paper.js 或 Fabric.js 等库简化开发。
344 2
|
jenkins 测试技术 持续交付
Docker最佳实践:构建高效的CI/CD流水线
【10月更文挑战第17天】在现代软件开发实践中,持续集成(Continuous Integration, CI)和持续部署(Continuous Deployment, CD)已成为提高开发效率和软件质量的重要手段。Docker作为一种容器技术,为构建一致且隔离的开发环境提供了强有力的支撑。本文将探讨如何利用Docker来优化CI/CD流程,包括构建环境的标准化、镜像管理以及与CI/CD工具(如Jenkins、GitLab CI)的集成。
563 5
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
|
边缘计算 人工智能 监控
边缘计算与AI结合的场景案例研究
【8月更文第17天】随着物联网(IoT)设备数量的爆炸性增长,对实时数据处理的需求也随之增加。传统的云计算模型在处理这些数据时可能会遇到延迟问题,尤其是在需要即时响应的应用中。边缘计算作为一种新兴的技术趋势,旨在通过将计算资源更靠近数据源来解决这个问题。本文将探讨如何将人工智能(AI)技术与边缘计算结合,以实现高效的实时数据分析和决策制定。
1237 1