快捷導(dǎo)航

react結(jié)合bootstrap實現(xiàn)評論功能

更新時間：2020年05月30日 11:29:59 作者：xiaopengyaonixi

這篇文章主要為大家詳細介紹了react結(jié)合bootstrap實現(xiàn)評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react結(jié)合bootstrap實現(xiàn)評論功能的具體代碼，供大家參考，具體內(nèi)容如下

<!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">
 // 定義評論發(fā)送消息的子組件
 var Content = React.createClass({
 getInitialState:function () {
 return {
  inputText:""
 }
 },
 handleChange:function (event) {
 this.setState({
 inputText:event.target.value
 });
 },
 handleSubmit:function () {
 console.log("發(fā)送給:"+this.props.selectName+",內(nèi)容:"+this.state.inputText);
 // 這里發(fā)送請求到后臺
 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>