[React]简易留言板

效果如图：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-core/5.8.24/browser.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/css.css">
</head>
<body>
<div id="test" class="container"></div>
<script type="text/babel" src="./js/app.js"></script>
</body>
</html>

/**
 * @author: wilcohuang
 * @date: 2017/12/11
 * @time: 9:28
 */

/*
ReactDOM.render(
    <div>
        <button className="btn btn-default">Add</button>
        <ul className="list-group">
            <li className="list-group-item">Cras justo odio <a className="right"
                                                               clsssName="glyphicon glyphicon-edit" href=""></a>
                <a className="right glyphicon glyphicon-remove-circle" href="#"></a></li>
            <li className="list-group-item">
                <input className="item-edit" type="text"/> <a className="glyphicon glyphicon-share"
                                                              href="#"></a>
                <a className="right glyphicon glyphicon-remove-circle" href="#"></a>
            </li>
        </ul>
    </div>, document.getElementById('test')
);*/

//Item
const Item = React.createClass({
    remove: function () {
        this.props.onRemove(this.props.id);
    },
    edit: function() {
        this.props.onEdit(this.props.id, this.props.value);
    },
    render: function () {
        return <li className="list-group-item">{this.props.value}<a className="right glyphicon glyphicon-edit" href="#" onClick={this.edit}></a>
            <a className="right glyphicon glyphicon-remove-circle" href="#" onClick={this.remove}></a></li>;
    },
});

//ItemEditor
const ItemEditor = React.createClass({
    getInitialState: function () {
        return {
            value: this.props.value,
        }
    },
    changeHandle: function (event) {
        // this.state.value = event.target.value;
        // this.forceUpdate();
        this.setState({value: event.target.value});
    },
    remove: function () {
        this.props.onRemove(this.props.id);
    },
    save: function () {
        this.props.onSave(this.props.id, this.state.value);
    },
    render: function () {
        return <li className="list-group-item">
            <input className="item-edit" type="text" value={this.state.value} onChange={this.changeHandle}/> <a
            className="glyphicon glyphicon-share" onClick={this.save}
            href="#"></a>
            <a className="glyphicon glyphicon-remove-circle" href="#" onClick={this.remove}></a>
        </li>;
    }
});

//List
const List = React.createClass({
    getInitialState: function () {
        return {
            key: 0,
            list: new Map(),
            editList: new Map(),
        };
    },
    add: function () {
        this.state.editList.set(++this.state.key, '');
        this.forceUpdate();
    },
    removeItem: function (id) {
        this.state.list.delete(id);
        this.forceUpdate();
    },
    removeItemEditor: function (id) {
        this.state.editList.delete(id);
        this.forceUpdate();
    },
    save: function (id, value) {
        this.state.editList.delete(id);
        this.state.list.set(id, value);
        this.forceUpdate();
    },
    edit: function(id, value) {
        this.state.list.delete(id) ;
        this.state.editList.set(id, value);
        this.forceUpdate();
    },
    render: function () {
        const listDOM = [];
        const editListDOM = [];

        for (let entity of this.state.list) {
            listDOM.push(<Item id={entity[0]} key={entity[0]} value={entity[1]}
                               onRemove={this.removeItem}  onEdit={this.edit}></Item>);
        }

        for (let entity of this.state.editList) {
            editListDOM.push(<ItemEditor id={entity[0]}
                                         key={entity[0]} value={entity[1]}
                                         onRemove={this.removeItemEditor} onSave={this.save}></ItemEditor>)
        }

        return <div>
            <button onClick={this.add} className="btn btn-default">Add</button>
            <ul className="list-group">
                {listDOM}
                {editListDOM}
            </ul>
        </div>;
    }
});

ReactDOM.render(<List></List>, document.getElementById('test'));

.right {
    float: right;
}

.list-group-item a {
    margin-left: 10px;
}

.item-edit {
    outline: none;
    border-width: 0 0 1px 0;
}

猜你喜欢