hook+ant design实现文本Input多行编辑

代码

a35dd72527ec4c4646dee9a90a66aea6.png

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;

效果

b82aa94dbf3cc80006aa12976f3b529f.png

3c9bb0742377dab3f7d948c202867f41.png

posted @   前端导师歌谣  阅读(27)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示