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

Z时代
2024-01-10
分类：综合
vue
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;