React 事件對象、鍵盤事件、表單事件、ref獲取dom節點、react實現相似Vue雙向數據綁定

一、案例實現代碼

import React, { Component } from 'react';

/**
 * 事件對象、鍵盤事件、表單事件、ref獲取dom節點、react實現相似Vue雙向數據綁定
 * 事件對象: 在觸發DOM上的某個事件時，會產生一個事件對象event,這個對象包含着全部與事件有關的信息
 * 表單事件: 獲取表單的值
 *      一、監聽表單的改變事件    ---onChange
 *      二、在改變的事件裏面獲取表單輸入的值   ---event
 *      三、把表單輸入的值賦值給username    ---inputChange
 *      四、點擊按鈕的時候獲取state裏面的username   ---getInput
 * ref獲取dom節點: 獲取表單的值
 *      一、監聽表單的改變事件    ---onChange
 *      二、在改變的事件裏面獲取表單輸入的值   ---ref
 *      三、把表單輸入的值賦值給username    ---inputChange
 *      四、點擊按鈕的時候獲取state裏面的username   ---getInput
 *鍵盤事件:
 *      一、onKeyUp
 *      二、onKeyDown
 *react實現相似Vue雙向數據綁定
 *      一、 <input  value={this.state.username} onChange={this.inputChange1}/>
 *      二、inputChange1=(e)=>{
                this.setState({
                    username:e.target.value
                })
            }
 *
 */
class Home5 extends Component{
    constructor(props){
        super(props);
        this.state={
            title:'這是Home5',
            username:"楊文傑"
        }
    }

    /**
     * 通常經過這個事件對象獲取Dom節點，即event.target
     * 經過event獲取dom屬性，即event.target.getAttribute
     * @param event 事件對象
     */
    run=(event)=>{
        alert(this.state.title)
        alert(event.target) ;//獲取Dom節點 ，通常也只是獲取Dom節點
        event.target.style.background='red';
        //獲取Dom的屬性的值
        alert(event.target.getAttribute('aid'))
    }
    /**
     * 獲取表單的值
     * @param e
     */
    inputChange=(e)=>{

        console.log(e.target.value);
        this.setState({
            username:e.target.value
        });
    }
    getInput=()=>{
        alert(this.state.username)
    }

    /**
     * Ref獲取表單值
     * @param e
     */
    inputChangeRef=(e)=>{
        /**
         * 獲取Dom節點
         *      一、給元素定義ref屬性
         *              <input ref="username" />
         *      二、 經過this.refs.username 獲取Dom節點
        */
        let val = this.refs.username.value;
        this.setState({
            username:val
        })
    }
    getInputRef=()=>{
        alert(this.state.username)
    }

    /**
     * 鍵盤事件
     * @param e
     */
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode){
            alert(e.target.value);
        }
    }

    inputKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode){
            alert(e.target.value);
        }
    }

    /**
     * 雙向數據綁定
     * @param e
     */
    inputChange1=(e)=>{
        this.setState({
            username:e.target.value
        })
    }

    changeUsernameValue=(e)=>{
        this.setState({
            username:"改變了"
        })
    }
    render(){
        return(
            <div>
                {this.state.title}
                <p>事件對象演示</p>
                <button aid ="123" onClick={this.run}>事件對象</button>
                <br/>
                <p>表單事件對象演示</p>
                <input onChange={this.inputChange}/><button onClick={this.getInput}>獲取input輸入框值</button>
                <br/>
                <p>表單事件對象演示---ref獲取表單值</p>
                <input ref="username" onChange={this.inputChangeRef}/><button onClick={this.getInputRef}>獲取input輸入框值</button>
                <br/>
                <p>鍵盤事件</p>
                <input onKeyUp={this.inputKeyUp}/><button>鍵盤事件</button>
                <br/>
                <input onKeyDown={this.inputKeyDown}/><button>鍵盤事件</button>
                <br/>
                <p>雙向數據綁定---model改變影響view view改變反過來影響model</p>
                <input  value={this.state.username} onChange={this.inputChange1}/>
                {this.state.username}
                <br/>
                <button onClick={this.changeUsernameValue}>雙向數據修改</button>
            </div>
        )
    }
}
export  default  Home5;