react結合bootstrap實現評論功能
阿新 • • 發佈：2020-06-01
本文例項為大家分享了react結合bootstrap實現評論功能的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/[email protected]/dist/react.js"></script> <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> <script src="https://unpkg.com/[email protected]/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>
更多教程被整理到：Bootstrap基礎教程 專題中，歡迎點選學習。
如果大家還想深入學習，可以點選這裡進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程
本文都是通過最簡單的案例，來剖析案例中涉及到的佈局要點，希望對大家的學習有所幫助。