kede-client/js/component/account/set/ablt.jsx

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 && inputValue.replace(/(^\s*)|(\s*$)/g, "").length != 0) {
            tags = [...tags, inputValue.replace(/(^\s*)|(\s*$)/g, "")];
        }
        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 (
            <div className="ablt-tips">
                {tags.map((tag, index) => {
                    const isLongTag = tag.length > 11;
                    const tagElem = (
                        <Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
                            {isLongTag ? `${tag.slice(0, 11)}...` : tag}
                        </Tag>
                    );
                    return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
                })}
                {inputVisible && (
                    <Input
                        ref={input => 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 && <Button className="addtips" type="dashed" disabled={tags.length > 10 ? true : false} onClick={this.showInput.bind(this)}>+ 新标签</Button>}
            </div>
        );
    }
};

const Base = React.createClass({
    getInitialState() {
        return {
            loading: false,
            tags: []
        };
    },
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/ability",
            success: function (data) {
                if (data.data) {
                    this.setState({
                        id: data.data.id || null,
                        abltArr: data.data.abilityLabel ? data.data.abilityLabel.split(",") : [],
                        intellectRight: data.data.intellectRight,
                        scienceAchievement: data.data.scienceAchievement,
                        researchInnovation: data.data.researchInnovation,
                        personnel: data.data.personnel
                    });
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    componentWillMount() {
        this.loadData();
    },
    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: {
                'id': this.state.id,
                'abilityLabel': theTags,
                "intellectRight": this.state.intellectRight,
                "scienceAchievement": this.state.scienceAchievement,
                "researchInnovation": this.state.researchInnovation,
                "personnel": this.state.personnel
            }
        }).done(function (data) {
            if (!data.error.length) {
                message.success('保存成功！');
                this.loadData();
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            })
        }.bind(this));
    },
    render() {
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-ablt">
                    <div className="acc-detail">
                        <p className="acc-title">能力标签</p>
                        <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
                        <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
                    </div>
                    {userData.type == "1" ? <div className="acc-detail clearfix">
                        <p className="acc-title">能力标签</p>
                        <div className="acc-area">
                            <p>知识产权对企业竞争力的作用 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.intellectRight}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ intellectRight: e.target.value });
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>科技成果转化情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.scienceAchievement}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ scienceAchievement: e.target.value })
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>研究开发与技术创新组织管理情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.researchInnovation}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ researchInnovation: e.target.value })
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>管理与科技人员情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.personnel}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ personnel: e.target.value })
                                }} />
                        </div>
                    </div> : <div></div>}
                    <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
                </div>
            </Spin>
        )
    }
});

export default Base;