/*
事件物件  、鍵盤事件、 表單事件 、ref獲取dom節點、React實現類似vue雙休資料繫結


事件物件:在觸發DOM上的某個事件時,會產生一個事件物件event。這個物件中包含著所有與事件有關的資訊


*/

import React from 'react';

import '../assets/css/index.css';


class Home extends React.Component{

    // 子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件
 


    constructor(props){
        super(props);   //固定寫法

        this.state={

            msg:'我是一個home元件',
            username:''
        }   

        
    }

    run=(event)=>{

        // alert(this.state.msg);


        // console.log(event);

        // alert(event.target);   /*獲取執行事件的dom節點*/

        event.target.style.background
 
='red';


        //獲取dom的屬性
        alert(event.target.getAttribute('aid'))



    }

    inputChange=(e)=>{

        // console.log('111');

        //獲取表單的值

        console.log(e.target.value);


        this.setState({

            username:e.target.value
        })


    }

    getInput=()=>{

        alert(
 
this.state.username);
    }

    render(){
        return(
            <div>              
               
               {this.state.msg}

               {/* 事件物件 */}

               <h2>事件物件演示</h2>

               <button aid="123" onClick={this.run}>事件物件</button>

               <br /><br /> <hr />


                <h2>表單事件</h2>


                {/* 獲取表單的值

                1、監聽表單的改變事件                        onChange
                2、在改變的事件裡面獲取表單輸入的值           事件物件
                3、把表單輸入的值賦值給username              this.setState({})
                4、點選按鈕的時候獲取 state裡面的username     this.state.username
                 */}

                <input onChange={this.inputChange}/> <button onClick={this.getInput}>獲取input的值</button>




                 <br /><br /> <hr />
            </div>
        )

    }    
}
export default Home;