本文实例为大家分享了react结合bootstrap实现评论功能的具体代码,供大家参考,具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < 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 > |
更多教程被整理到:Bootstrap基础教程 专题中,欢迎点击学习。
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
本文都是通过最简单的案例,来剖析案例中涉及到的布局要点,希望对大家的学习有所帮助。
- 本文固定链接: https://zxbcw.cn/post/187659/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)