| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 | 
import React from 'react';import {Tag,Input,Button,Tooltip} from 'antd';const KeyWordTagGroup = React.createClass({    getInitialState() {        return {            tags: [],            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 && inputValue.replace(/(^\s*)|(\s*$)/g, "").length != 0) {            tags = [...tags, inputValue.replace(/(^\s*)|(\s*$)/g, "")];        }        this.props.tagsArr(tags);        this.setState({            tags,            inputVisible: false,            inputValue: '',        });    },    componentWillMount() {        this.state.tags = this.props.keyWordArr;    },    componentWillReceiveProps(nextProps) {        if (this.props.keyWordArr != nextProps.keyWordArr) {            this.state.tags = nextProps.keyWordArr;        };    },    render() {        const { tags, inputVisible, inputValue } = this.state;        return (            <div className="keyWord-tips">                {tags.map((tag, index) => {                    const isLongTag = tag.length > 10;                    const tagElem = (                        <Tag key={tag} closable={index !== -1} afterClose={() => this.handleClose(tag)}>                            {isLongTag ? `${tag.slice(0, 10)}...` : 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}                        onBlur={this.handleInputConfirm}                        onPressEnter={this.handleInputConfirm}                    />                )}                {!inputVisible && <Button className="addtips" type="dashed" disabled={tags.length > 9 ? true : false} onClick={this.showInput}>+ 新关键词</Button>}            </div>        );    }}); export default KeyWordTagGroup;
 |