react留言功能实现(二)

用react实现的简单留言功能,提交留言和删除留言,

组件划分:
总组件:MainComponent
消息组件:MesComponent
列表展示组件:ListComponent
列表组件:ItemComponent

数据结构

{
userName:”zt”,
content:”欢迎来到秋秋蓝枫博客!”,
_id:Date.now()+1
},{
userName:”蓝枫”,
content:”欢迎来到秋秋蓝枫博客!”,
_id:Date.now()
}

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
           <style type="text/css">
                .down_select{
                    height: 20px;
                    background: #fff;
                    width: 60px;
                    color: #000;
                }
                .handle {
                    width: 40px;
                    border:1px solid #ccc;
                    background: #fff;
                    position: absolute;
                    right: 10px;
                    top:1px;
                    text-align: center;
                }

                .handle a{
                    display: block;
                    text-decoration: none;
                }
                .list-group-item .centence{
                    padding: 0px 50px;
                }
                .user{
                    font-size: 22px;
                }
                .reply {
                    margin-top: 0px;
                }
                .list-group li {
                    transition: .5s;
                    overflow: hidden;
                }
            </style>
        <script src="./src/react-with-addons.js"></script>
        <script src="./src/react-dom.js"></script>
        <script src="./src/browser.min.js"></script>
        <script src="./src/pubsub.js"></script>
    </head>

    <body>
        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到秋秋蓝枫博客</h1>
                        <p class="lead">秋秋蓝枫博客是一个技术分享....!</p>
                    </div>
                </div>
            </div>
        </header>
        <div class="container" id="demo">

        </div>
        <script type="text/babel">
            var delectItem = 'delectItem';
            var MesComponent = React.createClass({
                render:function () {
                    return (
                        <div className="col-md-4">
                            <form className="form-horizontal">
                                <div className="form-group">
                                    <label>用户名</label>
                                    <input type="text" ref="userName" className="form-control" placeholder="用户名" />
                                </div>
                                <div className="form-group">
                                    <label>留言内容</label>
                                    <textarea ref="content" className="form-control" rows="6" placeholder="留言内容"></textarea>
                                </div>
                                <div className="form-group">
                                    <div className="col-sm-offset-2 col-sm-10">
                                        <button type="button" className="btn btn-default pull-right" onClick={this.addItemHandle}>提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    )
                },
                addItemHandle:function () {
                    var user = this.refs.userName.value,
                        contentt = this.refs.content.value;
                    if(user!="" && (contentt !="")){
                        this.props.addItem1({
                            userName:user,
                            content:contentt,
                            _id :Date.now()
                        })
                    }

                    this.refs.userName.value="";
                    this.refs.content.value="";
                }
            })
            var ItemComponent = React.createClass({
                render:function () {
                    return (
                        <li className="list-group-item">
                            <div className="handle" >
                                <a href="javascript:;" onClick={this.delectHandle}>删除</a>
                            </div>
                            <p className="user" ><span >{this.props.userName}</span><span>说:</span></p>
                            <p className="centence">{this.props.content}</p>
                        </li>
                    )
                },
                delectHandle:function () {
                    PubSub.publish(delectItem,this.props._id);
                }
            })
            var ListConmponent = React.createClass({

                render:function () {
                    var isNone= !!this.props.listArr.length ?"none":"block";
                    return (
                        <div className="col-md-8">
                            <h3 className="reply">留言回复:</h3>
                            <h2 style={{display:isNone}}>暂无留言,点击左侧添加留言!!!</h2>
                            <ul className="list-group">
                                {
                                    this.props.listArr.map(function (item,index){
                                        return <ItemComponent key={index} {...item} />
                                    })
                                }
                            </ul>
                        </div>
                    )
                }
            })
            var MainConmponent = React.createClass({
                getInitialState:function () {
                    return{
                        listArr:this.props.listArr
                    }
                },
                componentDidMount:function () {
                        PubSub.subscribe(delectItem,function (evName,data) {
                        var newArr= this.state.listArr.filter(function (item,index) {
                                return item._id !==data
                            })
                            this.setState({listArr:newArr})
                        }.bind(this))
                },
                addItem:function (data) {
                    this.state.listArr.push(data)
                    this.setState({listArr:this.state.listArr})
                },
                render:function () {
                    return (
                        <div className="container">
                            <MesComponent addItem1={this.addItem}/>
                            <ListConmponent listArr={this.state.listArr} />
                        </div>
                    )
                }
            })

            var listArr = [
                {
                    userName:"zt",
                    content:"欢迎来到秋秋蓝枫博客!",
                    _id:Date.now()+1
                },{
                    userName:"蓝枫",
                    content:"欢迎来到秋秋蓝枫博客!",
                    _id:Date.now()
                }
            ]
            ReactDOM.render(<MainConmponent listArr={listArr} />,document.getElementById('demo'))
        </script>
    </body>
</html>
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值