初识ReactJS的组件化开发(九):下拉框的使用方法

js代码：

// 创建组件
var NavBar = React.createClass({
    removeNode: function () {
        ReactDOM.unmountComponentAtNode(document.getElementById("container"))
    },

    loadMovie: function () {
        ReactDOM.render(
            <MovieList src="http://localhost/myphp/movies.php" />,
            document.getElementById("container")
        )
    },

    loadReview: function () {
        ReactDOM.render(
            <div>
                <ReviewList src="http://localhost/myphp/reviews.php" />
                <ReviewBox />
            </div>,

            document.getElementById("container")
        )
    },

    render: function(){
        return <ul>
                <li><a href="#" onClick={this.loadMovie}>最新电影</a></li>
                <li><a href="#" onClick={this.loadReview}>最新评论</a></li>
                <li><a href="#" onClick={this.removeNode}>移除组件</a></li>
                <li><SearchText  cssClass={this.props.searchTextCss} placeholder={this.props.searchTextPlaceHolder} /></li>
            </ul>
    }
});

// 搜索框组件
var SearchText = React.createClass({
    render: function(){
        return <input type="text" placeholder={this.props.placeholder} className={this.props.cssClass}/>
    }
});

// 电影列表组件
var MovieList = React.createClass({
    getInitialState: function () {
        return {
            movie:[] //保存电影json对象数组
        };
    },

    componentDidMount: function () {
        $.get(this.props.src,null,function (ret) {
            this.setState({movie:ret});
        }.bind(this))
    },

    render: function(){
        if(this.state.movie.length == 0){
            //代表还没有完成 数据交互,显示一个蒙版
            return <PageMask />
        }else{
            var lis = this.state.movie.map(function (m) {
                return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
            })
            return <ul id="movielist">{lis}</ul>
        }

    }
});

// 电影评论组件
var ReviewList = React.createClass({
    getInitialState: function () {
        return {
            review:[], //保存电影json对象数组
            timer:null
        };
    },

    componentDidMount: function () {
        this.state.timer = setInterval(function () {
            $.get(this.props.src,null,function (ret) {
                this.setState({review:ret});
            }.bind(this))
        }.bind(this),3000);
    },

    componentWillUnmount: function () {
        if(this.state.timer != null){
            clearInterval(this.state.timer);
        }
    },

    render: function(){
        if(this.state.review.length == 0){
            //代表还没有完成 数据交互,显示一个蒙版
            return <PageMask />
        }else{
            var lis = this.state.review.map(function (r) {
                return <li><span className="author">{r.user}</span><span>{r.content}</span></li>
            })
            return <ul id="reviewList">{lis}</ul>
        }

    }
});

// 评论框组件
var ReviewBox = React.createClass({
    getInitialState: function () {
        return {
            rtitle: "初始化标题", //评论标题
            rcontent: "",
            rcontentnum:0,
            rselected:'b'
        };
    },

    textChange:function (event) {
        this.setState({rtitle: event.target.value});
    },

    textAreaChange:function (event) {
        var getValue = event.target.value;
        var len = getValue.length;
        this.setState({rcontent:getValue, rcontentnum:len});
    },

    selectChange:function (event) {
        this.setState({rselected:event.target.value, rcontent:event.target.selectedOptions[0].text});
    },

    submit: function () {
        alert(this.state.rselected)
    },

    render: function () {
        return <dl className="reviewbox">
                <dt>发表评论</dt>
                <dd><input type="text" value={this.state.rtitle} onChange={this.textChange} /></dd>
                <dd><textarea value={this.state.rcontent} onChange={this.textAreaChange} ></textarea></dd>
                <dd><span>已经输入长度为:{this.state.rcontentnum}</span></dd>
                <dd>
                    <select value={this.state.rselected} onChange={this.selectChange}>
                        <option value="a">--请选择默认--</option>
                        <option value="b">发布到首页</option>
                        <option value="c">发布到精选区</option>
                    </select>
                </dd>
                <dd><input type="button" value="提交" onClick={this.submit} /></dd>
            </dl>
    }
});

// 遮罩组件
var PageMask = React.createClass({
    render: function () {
        return <div className="mask"><p>正在加载...</p></div>
    }
});



ReactDOM.render(
    // 使用组件
    <NavBar searchTextCss="search_text2" searchTextPlaceHolder="请输入关键字" />,
    document.getElementById("navbar")
);

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <script src="node_modules/zepto/dist/zepto.min.js"></script>

    <style type="text/css">
        *{padding: 0;margin: 0}
        #navbar{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #222;}
        #navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
        #navbar li a{color: #fff;text-decoration: none;}
        /*searchtext的样式*/
        .search_text{height: 25px;border-radius: 5px;}
        .search_text2{height: 25px;border-radius: 5px;background-color: beige}

        #container{margin: 70px auto;}
        #container p{text-align: center;}

        #movielist .title{font-weight: bold;font-size: 18px;}
        #movielist .intro{text-indent: 2em;color: gray;border-bottom: 1px dashed #dddddd;text-align: left;padding: 10px;}

        .mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: gray;opacity: 0.5;z-index: 999;}
        .mask p{width: 20%;height: 30px;line-height: 3px;margin: 0 auto;margin-top: 30%;opacity: 1.0;}

        #reviewList{width: 80%;margin: 10px auto;}
        #reviewList li{line-height: 24pt;float: left;width: 100%;display: block;border: 1px solid #dddddd;margin-top: 16px;text-indent: 2em;}
        #reviewList li .author{color: gray;margin-left: 5px;}

        .reviewbox{width: 80%;margin: 10px auto;}
        .reviewbox dt{line-height: 21pt;font-weight: bold;}
        .reviewbox dd{margin-top: 10px;}

    </style>
</head>
<body>
    <div id="navbar"></div>

    <div id="container">

    </div>

    <div id="footer"></div>

    <script type="text/babel" src="src/nav.js"></script>
</body>
</html>