import React from 'react'; import './ablt.less'; import { Tag, Input, Tooltip, Button, Spin } from 'antd'; class EditableTagGroup extends React.Component { constructor(props) { super(props); this.state = { tags: ['我的标签:', '标签1', '标签2'], inputVisible: false, inputValue: '', } } handleClose(removedTag) { const tags = this.state.tags.filter(tag => tag !== removedTag); this.props.tagsArr(tags); this.setState({ tags }); } showInput() { this.setState({ inputVisible: true }, () => this.input.focus()); } handleInputChange(e) { this.setState({ inputValue: e.target.value }); } handleInputConfirm() { const state = this.state; const inputValue = state.inputValue; let tags = state.tags; if (inputValue && tags.indexOf(inputValue) === -1) { tags = [...tags, inputValue]; } this.props.tagsArr(tags); this.setState({ tags, inputVisible: false, inputValue: '', }); } render() { const { tags, inputVisible, inputValue } = this.state; return (
{tags.map((tag, index) => { const isLongTag = tag.length > 20; const tagElem = ( this.handleClose(tag)}> {isLongTag ? `${tag.slice(0, 20)}...` : tag} ); return isLongTag ? {tagElem} : tagElem; })} {inputVisible && ( this.input = input} type="text" style={{ width: 78 }} value={inputValue} onChange={this.handleInputChange.bind(this)} onBlur={this.handleInputConfirm.bind(this)} onPressEnter={this.handleInputConfirm.bind(this)} /> )} {!inputVisible && }
); } }; const Base = React.createClass({ getInitialState() { return { loading: false }; }, tagsArr(e){ this.state.tags = e.slice(1); }, submit() { console.log(this.state.tags); }, render() { return (

能力标签

最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。

) } }); export default Base;