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;