import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput defaultValue={['抖音', '火山', '西瓜视频']} placeholder='请输入...' onChange={v => console.log(v)} /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <> <TagInput separator='-' placeholder='使用 - 进行批量输入' onChange={v => console.log(v)} /> <br/><br/> <TagInput separator={['-', '/', '|', '++']} placeholder='支持多个分隔符进行批量输入' onChange={v => console.log(v)} /> </> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput showClear defaultValue={['抖音', '火山']} placeholder='请输入...' onChange={v => console.log(v)} /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput disabled showClear defaultValue={['抖音', '火山', '西瓜视频']} placeholder='请输入...' /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <> <TagInput size='small' placeholder='small'/> <br/><br/> <TagInput placeholder='default'/> <br/><br/> <TagInput size='large' placeholder='large'/> </> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <> <TagInput placeholder='default'/> <br/><br/> <TagInput placeholder='warning' validateStatus='warning'/> <br/><br/> <TagInput placeholder='error' validateStatus='error'/> </> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; import { IconVigoLogo, IconGift } from '@douyinfe/semi-icons'; () => ( <> <TagInput prefix={<IconVigoLogo />} /> <br/><br/> <TagInput prefix="Prefix" /> <br/><br/> <TagInput suffix={<IconGift />} /> <br/><br/> <TagInput suffix="Suffix" /> </> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput defaultValue={['抖音', '火山', '西瓜视频']} addOnBlur={true} placeholder='请输入...' onChange={v => console.log(v)} /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput defaultValue={['抖音', '火山', '西瓜视频']} allowDuplicates={false} placeholder='请输入...' onChange={v => console.log(v)} /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <> <TagInput max={3} placeholder='最多输入3条标签..' onChange={v => console.log(v)} onExceed={v => { Toast.warning('超过 max'); console.log(v); }} /> <TagInput maxLength={5} placeholder='单个标签长度不超过5...' style={{ marginTop: 12 }} onChange={v => console.log(v)} onInputExceed={v => { Toast.warning('超过 maxLength'); console.log(v); }} /> </> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput maxTagCount={2} showRestTagsPopover={true} restTagsPopoverProps={{ position: 'top' }} defaultValue={['抖音', '火山', '西瓜视频']} onChange={v => console.log(v)} /> );

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; class TagInputDemo extends React.Component { constructor(props) { super(props); this.state = { value: ['抖音'] }; } onChange(value) { this.setState({ value }); } render() { return ( <TagInput value={this.state.value} onChange={value => {this.onChange(value);}} /> ); } }

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; class TagInputDemo extends React.Component { constructor() { super(); this.state = { value: 'abc' }; } handleInputChange(value, event) { this.setState({ value }); } render() { return ( <TagInput inputValue={this.state.value} onInputChange={(v, e) => this.handleInputChange(v, e)} /> ); } }

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput defaultValue={['抖音']} placeholder='请输入...' showClear onFocus={e => {console.log(`onFocus`);}} onBlur={e => {console.log(`onBlur`);}} onChange={tag => {console.log(`onChange,当前标签数组：${tag}`);}} onAdd={tag => {console.log(`onAdd，新增：${tag}`);}} onRemove={(v, i) => {console.log(`onRemove，移除：${v}, 序号：${i}`);}} onInputChange={(input, e) => {console.log(`onInputChange，当前输入内容：${input}`);}} /> );

import React from 'react'; import { TagInput, Button } from '@douyinfe/semi-ui'; class TagInputDemo extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); this.handleTagInputFocus=this.handleTagInputFocus.bind(this); } handleTagInputFocus(){ this.ref.current.focus(); } render() { return ( <> <TagInput defaultValue={['抖音', '火山']} ref={this.ref} /> <Button style={{ marginTop: 10 }} onClick={this.handleTagInputFocus}> 点击按钮聚焦 </Button> </> ); } }

import React from 'react'; import { TagInput, Avatar } from '@douyinfe/semi-ui'; import { IconClose } from '@douyinfe/semi-ui-icons'; class CustomRender extends React.Component { constructor(props) { super(props); this.state = { value: ['夏可漫'] }; this.list = [ { "name": "夏可漫", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" }, { "name": "申悦", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" }, { "name": "曲晨一", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dbf7351bb779433d17c4f50478cf42f7.jpg" }, { "name": "文嘉茂", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/7abf810ff060ac3387bd027ead92c4e0.jpg" }, ]; this.mapList = new Map(this.list.map( item => [item.name, item])); } renderTagItem(value, index, onClose) { const data = this.mapList.get(value); return ( <div key={index} style={{ display: 'flex', alignItems: 'center', fontSize: 14, marginRight: 10 }} > <Avatar alt='avatar' src={data?data.avatar:'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'} size="extra-small" /> <span style={{ marginLeft: 8 }}> {`${value}@semi.com`} </span> <IconClose onClick={onClose} /> </div> ); } render() { const { value } = this.state; return ( <TagInput value={value} onChange={value => this.setState({ value })} renderTagItem={(value, index, onClose) => this.renderTagItem(value, index, onClose)} /> ); } }

import React from 'react'; import { TagInput } from '@douyinfe/semi-ui'; () => ( <TagInput draggable allowDuplicates={false} defaultValue={['抖音', '火山', '西瓜视频']} placeholder='请输入...' onChange={v => console.log(v)} /> );