react antd Input组件 输入/粘贴内容时识别换行

在react (class组件)，使用antd组件库中的Input时，实现

1.在当前input输入时，回车时识别换行，添加新元素，并自动聚焦下一个input

例如：在第一个输入框中输入内容1 后敲回车，添加新的一行，并聚焦到新行的输入框中

2.在当前input中粘贴，当粘贴内容中包含换行回车时，添加新input元素，将多行文本拆入成单行数据，并依次放入input中

例如：在第一个输入框中粘贴下面内容

国宝
黑白色
爱吃竹子

（功能1）敲下回车的回调，使用onPressEnter属性实现

（功能2）粘贴的回调，使用onPaste属性实现

代码实现：

// 内容排序
changeIndex = async (items, index, nextIndex) => {
    const item = items[index];
    const tmpItem = items[nextIndex];
    items[nextIndex] = item;
    items[index] = tmpItem;
    this.forceUpdate();
}

<div>
    {listItems.map((item, index) => {
        return (
            <div key={index} style={{ marginBottom: '5px', display: 'flex', justifyContent: 'space-between' }}>
                <Input id={`input_${index}`} type="text" value={item.content} onChange={(e) => {
                    listItems[index].content = e.target.value;
                    this.forceUpdate();
                }} style={{ width: '72%' }} onPressEnter={() => {
                    listItems.push({ content: '' });
                    this.forceUpdate();
                    // 直接通过document.getElementById('id')获取不到，需借助setTimeout
                    setTimeout(() => { document.getElementById(`input_${index + 1}`).focus(); }, 0);
                }} onPaste={(e) => {
                    // 阻止默认的粘贴行为
                    e.stopPropagation();
                    e.preventDefault();
                    // IE 获取粘贴内容 window.clipboardDatae对象，chrome等e.clipboardData || e.originalEvent.clipboardData （兼容处理）
                    const pastedText = e.clipboardData.getData('Text') || e.originalEvent.clipboardData.getData('Text') || window.clipboardData.getData('Text');
                    if (pastedText.includes('\n')) { // 判断粘贴的内容是否包含换行
                        const inputValueItem = pastedText.split(/[(\r\n)\r\n]+/);  // 根据换行将字符串拆分成数组
                        inputValueItem.forEach((v, i) => {
                            if (i !== 0) { listItems.push({ content: '' }); }  // 添加
                            listItems[index + i].content = v; // 填充处理后单行数据
                            this.forceUpdate();
                        });
                        setTimeout(() => { document.getElementById(`input_${index + inputValueItem.length - 1}`).focus(); }, 0);  // 聚焦到最后一行input
                    } else {
                        listItems[index].content = pastedText; // 单行数据直接粘贴
                        this.forceUpdate();
                    }
                }} />
                <Button id={`arrowUp-${index}`} onClick={() => {
                    this.changeIndex(listItems, index, index - 1); // 升序
                }} disabled={index === 0} icon={<ArrowUpOutlined />} style={{ marginLeft: '5px', color: '#005aff' }} />
                <Button id={`arrowDown-${index}`} onClick={() => {
                    this.changeIndex(listItems, index, index + 1); // 降序
                }} disabled={index === listItems.length - 1} icon={<ArrowDownOutlined />} style={{ marginLeft: '5px', color: '#0abf5b' }} />
                <Button id={`danger-${index}`} type="danger" onClick={() => {
                    listItems = listItems.filter((_, i) => { return (i !== index); }); // 删除内容行
                    this.forceUpdate();
                }} icon={<DeleteOutlined />} style={{ marginLeft: '5px' }} />
            </div>
        );
    })}
    <Button id="content-add" type="primary" size="small" icon={<PlusOutlined />} onClick={() => {
        listItems.push({ content: '' });  // 新增内容行
        this.forceUpdate();
    }} />
</div>