一、需求分析
二、代码
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 + " " + 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>
三、结果
http://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