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

相关文章
hook+ant design实现文本Input多行编辑
hook+ant design实现文本Input多行编辑
106 0
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
712 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1359 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
814 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
12月前
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
85 0
|
前端开发 JavaScript
前端hook项目pc总结笔记-ant design table多选
前端hook项目pc总结笔记-ant design table多选
144 0
前端hook项目pc总结笔记-ant design table多选
|
前端开发
#yyds干货盘点 【React工作记录十四】关于ant design中input加前缀的问题
#yyds干货盘点 【React工作记录十四】关于ant design中input加前缀的问题
121 0
#yyds干货盘点 【React工作记录十四】关于ant design中input加前缀的问题
|
前端开发
【Ant Design Pro】使用ant design pro做为你的开发模板(七)如何动态加载菜单列表
【Ant Design Pro】使用ant design pro做为你的开发模板(七)如何动态加载菜单列表
860 0
【Ant Design Pro】使用ant design pro做为你的开发模板(七)如何动态加载菜单列表
|
前端开发
【Ant Design Pro】使用ant design pro做为你的开发模板(八)开发第一个完整的后台页面
【Ant Design Pro】使用ant design pro做为你的开发模板(八)开发第一个完整的后台页面
646 0
【Ant Design Pro】使用ant design pro做为你的开发模板(八)开发第一个完整的后台页面
|
前端开发
前端hook项目moblie总结笔记-ant design进行动态表单添加
前端hook项目moblie总结笔记-ant design进行动态表单添加
119 0