基于react-hook-form封装一个动态增加的输入框群组

• 需求分析

输入框群组末尾总有一个空输入框，当最后的输入框内容不为空的时候，新增一个输入框；

当输入框群组中有空值输入框且不为最后一个的时候，将这个输入框移除。

// Parent.jsx
 import {Controller,useFrom} from 'react-hook-form'
function Parent(){
    const {control,handleSubmit}=useForm()
    const submit=(value)=>{
        // submit
    }
    return <form onSubmit={handleSubmit(submit)}>
        <Controller 
            name='dynamic_input_group' 
            control={control} 
            render={(field)=>
            <DynamicInputGroup field={field} />}
        />
    </form>
}

// DynamicInputGroup

function DynamicInputGroup({field}){
    const {onChange,value}=field
    // 将数组中的空值删除,并在最后拼上一个空字符串
    const inputList=[...value].filter(item=>item.trim()!=='').concat('')
    return <>{inputList.map((item,index)=>
                <input key={`index`}
                         value={item} 
                        onChange={e=>{
                            const newList=[...inputList.slice(0,index),
                            e.target.value,
                            ...inputList.slice(index+1)]
                            onChange(newList)
                        }/>)}
            </>
    }