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

相关文章
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
501 0
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
65 1
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
107 0
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
前端开发
关于ant design中input加前缀的问题
关于ant design中input加前缀的问题
144 0
|
前端开发
关于ant design中input限制加空格的问题
关于ant design中input限制加空格的问题
190 0
|
前端开发
关于ant design table组件里面文字溢出
关于ant design table组件里面文字溢出
136 0
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
92 0
|
数据处理 数据格式
hook项目实例之原始数据形成ant design table表格 2
hook项目实例之原始数据形成ant design table表格
71 0
|
数据格式
hook项目实例之原始数据形成ant design table表格
hook项目实例之原始数据形成ant design table表格
47 0