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 按钮的样式
446 0
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
52 1
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
100 0
Ant design组件库里面的Dropdown怎么写点击事件?
Ant design组件库里面的Dropdown怎么写点击事件?
|
前端开发
关于ant design中input限制加空格的问题
关于ant design中input限制加空格的问题
179 0
|
前端开发
关于ant design中input加前缀的问题
关于ant design中input加前缀的问题
136 0
|
前端开发 JavaScript
重置ant design得样式
重置ant design得样式
75 0
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
86 0
|
前端开发
关于ant design table组件里面文字溢出
关于ant design table组件里面文字溢出
131 0
hook+ant design实现input多行编写小案例
hook+ant design实现input多行编写小案例
64 0