React 屬性和狀態的一些總結
阿新 • • 發佈：2018-12-11
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1>10 <div id="container">11 12 </div>13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script>15 <script src="../shared/thirdparty/es5-sham.min.js"></script>16 <script src="../shared/thirdparty/console-polyfill.js"></script>17 <script src="../../build/react.js"></script>18 <script src="../../build/JSXTransformer.js"></script>19 <script type="text/jsx">20 21 //內容元件22 var Content = React.createClass({23 getInitialState:function(){24 return {25 inputText:'',26 };27 },28 handleChange:function(event){29 this.setState({inputText:event.target.value});30 },31 handleClick:function(){32 console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);33 },34 render:function(){35 36 return <div>37 <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>38 <button onClick = {this.handleClick}>sumbit</button>39 </div>;40 },41 });42 43 //評論元件44 var Comment = React.createClass({45 getInitialState:function(){46 return {47 names:["Tom","Axiba","daomul"],48 selectName:'',49 };50 },51 handleSelect:function(){52 this.setState(53 {selectName : event.target.value}54 );55 },56 render:function(){57 var options = [];58 //往options中新增子option59 for (var option in this.state.names) {60 options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)61 };62 return <div>63 <Content selectName = {this.state.selectName}>64 </Content>65 <select onChange = {this.handleSelect}>66 {options}67 </select>68 </div>;69 },70 });71 72 //start render73 React.render(<Comment></Comment>,document.body);74 </script>75 </body>76 </html>