React标签输入组件

安装

npm install react-tagsinput

使用

注意：inputValue必须和onChangeInput同时使用

import TagsInput from 'react-tagsinput';
import 'react-tagsinput/react-tagsinput.css';

const [tags, setTags] = useState<any>([]);
const [inputTag, setInputTag] = useState<any>('');
// 标签变化监听
const handleChangeTags = (val: any) => {
         setTags(val)
}
// 输入监听
const handleChangeTagInput = (e: any) => {
        setInputTag(e)
}
// 校验标签
const validateInputTag = (val: any) => {
        return val.length <= 12
}
 // 标签渲染
const customRenderTag = (props: any) => {
   let { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props
        return (
            <span key={key} {...other}>
                {getTagDisplayValue(tag)}
                {!disabled && <a className={classNameRemove} onClick={(e) => onRemove(key)} />}            </span>
        )
}

<TagsInput
                    value={tags}
                    onChange={handleChangeTags}
                    inputValue={inputTag}
                    onChangeInput={handleChangeTagInput}
                    onlyUnique={true}
                    addOnPaste={true}
                    validate={validateInputTag}
                    maxTags={30}
                    addKeys={[9, 13, 188]}
                    className={styles.tagsInput} 
                   tagProps={{
                        className: `react-tagsinput-tag ${styles.tagsInputTag}`,
                        classNameRemove: `react-tagsinput-remove ${styles.tagsInputTagRemove}`
                    }}
                    inputProps={{
                        className: `react-tagsinput-input ${tags && tags.length === 0 ? styles.tagsInputInput : ''}`,
                        placeholder: `${tags && tags.length > 0 ? '请输入' : '标签最多12个字'}`
                    }}
                    renderTag={customRenderTag}
                />

样式

.tagsInput {
    background-color: #F2F3F8;
    border-radius: 4px;
    min-height: 62px;
    padding: 12px 12px 0px 12px;
    input {
        margin-top: 0; 
        color: #0A0F16;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 0;
    }
}
.tagsInputTag {
    background-color: white;
    color: #0A0F16;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 12px;
    margin-right: 12px;
}
.tagsInputInput {
    width: 100%;
    height: 38px;
}

参考

npm中的react-tagsinput