react 学习--结合bootstrap实现评论功能

最新推荐文章于 2023-10-13 14:55:11 发布

xiaopengyaonixi

最新推荐文章于 2023-10-13 14:55:11 发布

阅读量3k

点赞数

分类专栏： react jQuery

本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52912326

版权

react 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <link rel="stylesheet" href="js/dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    // 定义评论发送消息的子组件
     var Content = React.createClass({
         getInitialState:function () {
             return {
                 inputText:""
             }
         },
         handleChange:function (event) {
            this.setState({
                inputText:event.target.value
            });
         },
         handleSubmit:function () {
             console.log("发送给:"+this.props.selectName+",内容:"+this.state.inputText);
             // 这里发送请求到后台
             this.refs.comm.value = "";
         },
         render:function () {
             return (
              <div>
                 <textarea ref="comm" className="form-control" onChange={this.handleChange} placeholder="请输入您的评论">
                 </textarea>
                  <br/>
                 <button className="btn btn-primary" onClick={this.handleSubmit}>提交</button>
              </div>
             );
         }
     });
    // 定义评论的组件
    var Comment = React.createClass({
        getInitialState:function () {
            return {
                names:["孔磊","肖洋","胡局新"],
                selectName:"孔磊",
                style:{
                    "width":"400px",
                    "margin":"0 auto"
                }
            };
        },
        handleSelect:function (event) {
            this.setState({
                selectName:event.target.value
            });
        },
        render:function () {
            var options = [];
            for(var option in this.state.names){
                options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
            };
            return (
                    <div className="panel panel-body panel-primary" style={this.state.style}>
                        <div className="form-group">
                            <select onChange={this.handleSelect} className="form-control">
                                {options}
                            </select>
                            <br/>
                            <Content selectName={this.state.selectName}/>
                        </div>
                    </div>
            );
        }
    });
    ReactDOM.render(<Comment/>,document.getElementById("app"));
</script>
</body>
</html>

xiaopengyaonixi

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
react 学习--结合bootstrap实现评论功能

Title // 定义评论发送消息的子组件 var Content = React.createClass({ getInitialState:function () { return { inputText:""
复制链接

扫一扫