React编写文本评论框

一、需求分析

二、代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性和状态实例演示</title>
 6 </head>
 7 <body>
 8     <script src="./react-0.13.2/build/react.js"></script>
 9     <script src="./react-0.13.2/build/JSXTransformer.js"></script>
10     <script type="text/jsx">
11         var Content = React.createClass({
12             getInitialState: function () {
13                 return {
14                     inputText: "",
15                 };
16             },
17             handleChange: function (event) {
18                 this.setState({inputText: event.target.value});
19             },
20             handleSubmit: function () {
21                 console.log("reply To: " + this.props.selectName + "\n" + this.state.inputText);
22             },
23             render: function () {
24                 return <div>
25                 <textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
26                 <button onClick={this.handleSubmit}>submit</button>
27                 </div>;
28             },
29         });
30         var Comment = React.createClass({
31             getInitialState: function () {
32                 return {
33                     names: ["Tim", "John", "Hank"],
34                     selectName: '',
35                 };
36             },
37             handleSelect: function (event) {
38                 this.setState({selectName: event.target.value});
39             },
40             render: function () {
41                 var options = [];
42                 for (var option in this.state.names) {
43                     options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
44                 };
45                 return <div>
46                 <select onChange={this.handleSelect}>
47                     {options}
48                 </select>
49                 <Content selectName={this.state.selectName}></Content>
50                 </div>;
51             },
52         });
53         React.render(<Comment></Comment>, document.body);
54     </script>
55 </body>
56 </html>

 

三、结果

https://files.cnblogs.com/files/shamgod/React%E5%B1%9E%E6%80%A7%E5%92%8C%E7%8A%B6%E6%80%81%E8%AF%A6%E8%A7%A3.zip

posted @ 2015-12-17 22:14  shamgod  阅读(504)  评论(0)  编辑  收藏  举报
haha