react 点击事件+父子传值

接下来要做的效果是，在父组件添加两个按钮，点击后改变父组件传过去的值

父组件

 import React, { Component } from 'react';
 import Test from './component/test';
 //声明welcome组件
 class welcome extends Component {
   //声明一个构造函数
   constructor(props) {
     super(props);
     //this.state是定义组件状态，可理解为组件中的数据，好比Vue中的data
     this.state = {
       userName: '路飞',
       userAge: 19
     }
   }
   changUserName(){
     //要修改this.state中的值，这是唯一的方法
     this.setState({
       userName: '路飞：海贼王的男人'
     })
   }
   // react元素 一律写在render函数中
   render() {
     return (
       <div>
         {/* 在子组件中声明一个userName属性，将this.state.userName的值传递到子组件中 */}
         <Test userName={this.state.userName} userAge={this.state.userAge}></Test>
         {/* 声明一个点击事件后面跟着一个bind(this) 是为了解决this指向问题 ，改变this指向 */}
         <button onClick={this.changUserName.bind(this)}>改变userName</button>
       </div>
     );
   }
 }
 //最后一定要记住 向外输出
 export default welcome;

子组件

 import React, { Component } from 'react';

 class test extends Component {
   render() {
     return (
       <div>
         <h1>海贼王</h1>
         {/* 在子组件中用this.props接收父组件中传递过来的值 */}
         {[this.props.userName, this.props.userAge]}

         {console.log(this.props)}
         {/* 通过控制台打印，this.props是传递过来的是一个对象：{userName: "路飞", userAge: 19} */}
       </div>
     );
   }
 }

 export default test;