前言

大家好 我是歌谣 最近在项目开发过程中 又学习到了一个小案例

代码

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;

效果