import React from 'react'; import './ablt.less'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import { Tag, Input, Tooltip, Button, Spin, message } from 'antd'; class EditableTagGroup extends React.Component { constructor(props) { super(props); this.state = { tags: ['我的标签:', '标签1', '标签2'], inputVisible: false, inputValue: '', propsBool:true } } 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: '', }); } componentWillReceiveProps(nextProps) { if ( nextProps.abltArr && this.state.propsBool ) { nextProps.abltArr.unshift("我的标签:"); this.state.tags = nextProps.abltArr; this.state.propsBool = false; }; } render() { const { tags, inputVisible, inputValue } = this.state; return (
{tags.map((tag, index) => { const isLongTag = tag.length > 11; const tagElem = ( this.handleClose(tag)}> {isLongTag ? `${tag.slice(0, 11)}...` : 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, tags: [] }; }, componentWillMount() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/ability", success: function (data) { if (data.data && data.data.abilityLabel) { this.setState({ abltArr: data.data.abilityLabel.split(","), }); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getTagsArr(e) { this.state.tags = e.slice(1); }, submit() { let theTags = this.state.tags.join(","); this.setState({ loading: true }) $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/userAbility", data: { 'abilityLabel': theTags } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.setState({ loading: false }) }.bind(this)); }, render() { return (

能力标签

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

) } }); export default Base;