<!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>
