React 学习之 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定...

(一) 表单事件

  获取表单的值分四步

  1.  监听表单的改变事件                                                      onChange
  2.    在改变的事件里面获取表单输入的值 事件对象              event.target.value
  3.    把表单输入的值赋值给username                                   this.setState({})
  4.    点击按钮的时候获取 state里面的                                   username this.state.username

   注: 一定要注意this的绑定  建议采用箭头函数

import React from 'react';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

            username:''
         };
    }
    inputChange=()=>{
        /*
            获取dom节点
                1、给元素定义ref属性
                    <input ref="username" />
                2、通过this.refs.username 获取dom节点
        
        */
        let val=this.refs.username.value;

        this.setState({
            username:val
        })

    }
    
    getInput=()=>{
        alert(this.state.username);
    }

    render() {
        return (
            <div><input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>

            </div>
        );
    }
}

export default List;

 


 

(二) 键盘事件

import React from 'react';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 

            username:''
         };
    }

    //键盘事件
    //keyCode  是js键盘按钮编号
    
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }
 
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode==13){
            alert(e.target.value);
        }
    }

    render() {
        return (
            <div>
                <h2>键盘事件</h2>
                {/** onKeyUp 是按Enter 抬上来的时候触发
                     onKeyDown 是按Enter 按下去的触发
                */}

                <input onKeyUp={this.inputKeyUp}/>

                <br /><br />

                <input onKeyDown={this.inputonKeyDown}/>
            </div>
        );
    }
}
export default List;

 


 

(三) React实现类似Vue的双向数据绑定

import React,{Component} from 'react';

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            username:"111"
        };
    }
    inputChange=(e)=>{
        this.setState({

            username:e.target.value
        })

    }
    setUsername=()=>{
        this.setState({

            username:'李四'
        })

    }
    render() {
        return (
            <div>
                <h2>双向数据绑定</h2>
                {/* model改变影响View    view改变反过来影响model  */}

                <input  value={this.state.username} onChange={this.inputChange}/>   {/*view 改变 影响model */}

               <p> {this.state.username}</p>
               
               <button onClick={this.setUsername}>改变username的值</button>          {/*model 改变影响view  React自带 */}

            </div>
        );
    }
}

export default Todolist;

 

 


 

 

 

    天亮以前说再见

 

转载于:https://www.cnblogs.com/misscai/p/10394468.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值