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;