[React]简易留言板

效果如图:
[React]简易留言板_第1张图片


<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(
    
  • Cras justo odio
, 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">Addbutton> <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;
}

你可能感兴趣的:(前端开发)