import React from 'react';
import ReactDOM from 'react-dom';
import {TransitionGroup, CSSTransition} from 'react-transition-group'
import uuid from 'uuid';
import './index.css';
import 'animate.css';

class App extends React.Component{
    state ={
        data:[
            {id:uuid(), text:'我爱中国'},
            {id:uuid(), text:'我爱祖国'},
            {id:uuid(), text:'我爱习大大'}
        ]
    };
    handleAdd = () =>{
        this.setState({
            data:[
                ...this.state.data,
                {
                    id:uuid(),
                    text:''+Date.now()
                }
            ]
        });
    }
    handleRemove = (index) =>{
        let data = [...this.state.data];
        data.splice(index,1);
        this.setState({data});
    }
    render(){
        const items = this.state.data.map((item,index)=>(
            <CSSTransition
                key={item.id}
                timeout={500}
                classNames={{
                    enter:'animated',
                    enterActive:'swing',
                    exit:'animated',
                    exitActive:'tada'
                }}
            >
                <div key={index} style={{float:'left'}}>
                    {item.text}
                    <button onClick={() =>this.handleRemove(index)}>&times;</button>
                </div>
            </CSSTransition>
        ))
        return (<div>
            <button onClick={this.handleAdd}>添加一项</button>
            <TransitionGroup>
                {items}
            </TransitionGroup>
        </div>)
    }
}

ReactDOM.render(<App />, document.getElementById('root'));