[关闭]
@2890594972 2018-05-04T04:37:20.000000Z 字数 1037 阅读 775

react 子组件向父组件传递参数

react

子组件向父组件传递参数

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>子组件向父组件传递参数</title>
  6.     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  7.     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
  8.     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="example"></div>
  12.     <script type="text/babel">
  13.     var Content = React.createClass({
  14.       sendFather: function(event){
  15.           this.props.updateStateProp(event, 'hello world', 'daxiang');
  16.       },
  17.       render: function() {
  18.         return  <div>
  19.                   <button onClick = {this.sendFather}>点我</button>
  20.                   <h4>{this.props.myDataProp}</h4>
  21.                </div>
  22.       }
  23.     });
  24.     var HelloMessage = React.createClass({
  25.       getInitialState: function() {
  26.         return {value: 'Hello Runoob!'};
  27.       },
  28.       handleChange: function(event, str) {
  29.         console.log(arguments)
  30.         this.setState({value: '菜鸟教程'})
  31.       },
  32.       render: function() {
  33.         var value = this.state.value;
  34.         return <div>
  35.                 <Content myDataProp = {value} 
  36.                   updateStateProp = {this.handleChange}></Content>
  37.                </div>;
  38.       }
  39.     });
  40.     ReactDOM.render(
  41.       <HelloMessage />,
  42.       document.getElementById('example')
  43.     );
  44.     </script>
  45.   </body>
  46. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注