码迷,mamicode.com
首页 > 其他好文 > 详细

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

时间:2019-02-23 10:59:21      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:end   元素   数据绑定   ext   一个   col   pre   mode   键盘   

1、案例实现代码

import React, { Component } from react;

/**
 * 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息
 * 表单事件: 获取表单的值
 *      1、监听表单的改变事件    ---onChange
 *      2、在改变的事件里面获取表单输入的值   ---event
 *      3、把表单输入的值赋值给username    ---inputChange
 *      4、点击按钮的时候获取state里面的username   ---getInput
 * ref获取dom节点: 获取表单的值
 *      1、监听表单的改变事件    ---onChange
 *      2、在改变的事件里面获取表单输入的值   ---ref
 *      3、把表单输入的值赋值给username    ---inputChange
 *      4、点击按钮的时候获取state里面的username   ---getInput
 *键盘事件:
 *      1、onKeyUp
 *      2、onKeyDown
 *react实现类似Vue双向数据绑定
 *      1、 <input  value={this.state.username} onChange={this.inputChange1}/>
 *      2、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节点
         *      1、给元素定义ref属性
         *              <input ref="username" />
         *      2、 通过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;

 

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

标签:end   元素   数据绑定   ext   一个   col   pre   mode   键盘   

原文地址:https://www.cnblogs.com/ywjfx/p/10421612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!