代码

labelArr是一个用来存放回车生成的标签们的数组。
使用e.key === 'Enter'来判断是否按下的是回车键

import React, { useState } from 'react';
import styles from './index.less'

export default () => {
    const [labelArr, setLabelArr] = useState([]) // 回车生成标签
    
    const handleEnter = e => {
        if (e.key === 'Enter') {
            e.preventDefault();
            const name = document.getElementById('input').value;
            document.getElementById('input').value = null
            if (labelArr.some(x => x === name)) {
                return;
            }
            labelArr.push(name)
            setLabelArr([...labelArr])
        }
    }

    function deleteTag(_, item, index) {
        labelArr.splice(index, 1)
        setLabelArr([...labelArr])
    }

    return (
        <div className={styles.tagSelectWrapper}>
            <div className={styles.tagWrapper}>
                {
                    labelArr.map((item, index) => (
                        <div className={styles.tag}>
                            <span className={styles.tagContent}>{item}</span>
                            <span 
                                className={styles.spanclose} 
                                onClick={_ => deleteTag(_, item, index)}
                            > 
                                x  // 标签里的"叉号"
                            </span>
                        </div>
                    ))
                }
            </div>
            <div style={{ width: '100%' }}>
                <input
                    onKeyDown={e => handleEnter(e)}
                    className={styles.input}
                    autoComplete="off"
                    placeholder="按回车生成标签"
                    id="input"
                    type="text"
                />
            </div>
        </div>
    )
}

.tagSelectWrapper{
    color: #d9d9d9;
    min-height: 32px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    padding:2px 10px 2px 5px;
    ::-webkit-input-placeholder { 
        color: #bfbfbf;
    }
}
//.tagSelectWrapper:empty::before {
//    color: #d9d9d9;
//    content: attr(placeholder); // 获取placeholder属性的值
//}
.tagSelectWrapper:focus{
    border-color: #3dabff;
    outline: 0; // 黑色实线是出在input的外边框，可判断为outline属性。
    box-shadow: 0 0 0 2px rgba(20, 146, 255, 0.2);
}
.tagWrapper{
    display: flex;
    flex-wrap: wrap;
}
.tag{
    position: relative;
    display: flex;
    flex: none;
    box-sizing: border-box;
    max-width: 100%;
    height: 24px;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 22px;
    background: #f5f5f5;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    cursor: default;
    transition: font-size 0.3s, line-height 0.3s, height 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-margin-end: 4px;
    margin-inline-end: 4px;
    -webkit-padding-start: 8px;
    padding-inline-start: 8px;
    -webkit-padding-end: 4px;
    padding-inline-end: 4px;
}
.tagContent{
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    position: relative;
    display: inline-block;
    margin-right: 4px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;

}
.spanclose{
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    color: rgba(0, 0, 0, 0.40);
    font-weight: bold;
    font-size: 10px;
    line-height: inherit;
    cursor: pointer;
}
.input{
    border-color: #3dabff !important;
    width: 100%;
    border-width: 0;
    outline: 0 !important; // 黑色实线是出在input的外边框，可判断为outline属性。
}

效果图