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

相关文章
|
7月前
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
229 0
|
10月前
|
前端开发 API
ant design控制tag选中的写法
ant design控制tag选中的写法
72 0
|
7月前
|
JavaScript
Ant Design vue 表格内换行
Ant Design vue 表格内换行
139 1
|
10月前
|
API
ant.design Table组件点击一个选项框却把所有选项都选中了
ant.design Table组件点击一个选项框却把所有选项都选中了
105 0
ant.design Table组件点击一个选项框却把所有选项都选中了
|
10月前
|
前端开发
关于ant design中input限制加空格的问题
关于ant design中input限制加空格的问题
120 0
|
10月前
|
前端开发 JavaScript
重置ant design得样式
重置ant design得样式
60 0
|
10月前
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
58 0
|
10月前
|
数据格式
hook项目实例之原始数据形成ant design table表格
hook项目实例之原始数据形成ant design table表格
36 0
|
10月前
|
数据处理 数据格式
hook项目实例之原始数据形成ant design table表格 2
hook项目实例之原始数据形成ant design table表格
47 0
|
10月前
|
前端开发
关于ant design中input加前缀的问题
关于ant design中input加前缀的问题
96 0