react留言功能实现（二）

最新推荐文章于 2022-07-28 18:31:26 发布

前端岚枫

最新推荐文章于 2022-07-28 18:31:26 发布

阅读量1k

点赞数

分类专栏： react 文章标签：留言功能 pubsub addons map

本文链接：https://blog.csdn.net/lfcss/article/details/79936859

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用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>

前端岚枫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
react留言功能实现（二）

用react实现的简单留言功能，提交留言和删除留言，组件划分：总组件：MainComponent 消息组件：MesComponent 列表展示组件：ListComponent 列表组件：ItemComponent数据结构 { userName:”zt”, co...
复制链接

扫一扫