React 基础入门(四):事件、获取数据、改变数据、执行方法传值、双向数据绑定

本文共有3092个字,关键词:ReactReact入门React教程

react 事件

在以类继承的方式定义的组件中,为了能方便地调用当前组件的其他成员方法或属性(如:this.state),通常需要将事件处理函数运行时的 this 指向当前组件实例。

绑定事件处理函数this的几种方法:

第一种方法:

run(){
  alert(this.state.name)
}
<button onClick={this.run.bind(this)}>按钮</button>

第二种方法:

构造函数中改变

this.run = this.run.bind(this);     
run(){        
   alert(this.state.name) 
}
<button onClick={this.run}>按钮</button>

第三种方法(推荐):

run=()=> {
    alert(this.state.name) 
}
<button onClick={this.run}>按钮</button>

获取数据

第一种改变this指向的方法

getData(){

        alert(this.state.msg);
}
<button onClick={this.getData.bind(this)}>获取数据</button>

第二种改变this指向的方法

this.getMessage= this.getMessage.bind(this);
getMessage(){
    alert(this.state.message);
}
<button onClick={this.getMessage}>获取数据</button>

第三种改变this指向的方法

getName=()=>{
    alert(this.state.username);
}
<button onClick={this.getName}>获取数据</button>

改变数据

改变state里面的值

setData=()=>{
        //改变state的值
        this.setState({
            msg:"我是一个home组件 这是改变后的值"
        })
}
<button onClick={this.setData}>改变值</button>

执行方法传值

单数据

setName=(str)=>{
        //改变state的值
        this.setState({
            username:str
        })
}
<button onClick={this.setName.bind(this,'张三')}>执行方法传值</button>

多数据

<button onClick={this.setName.bind(this,'张三','李四')}>执行方法传值</button> 

键盘事件

键盘抬起

inputKeyUp=(e)=>{

        console.log(e.keyCode);


        if(e.keyCode==13){

            alert(e.target.value);
        }

    }
<input onKeyUp={this.inputKeyUp}/>

键盘按下

inputonKeyDown=(e)=>{

        console.log(e.keyCode);

        if(e.keyCode==13){

            alert(e.target.value);
        }
    }
<input onKeyDown={this.inputonKeyDown}/>

表单事件

获取表单的值

1、监听表单的改变事件onChange
2、在改变的事件里面获取表单输入的值:ref获取
3、把表单输入的值赋值给username:this.setState({})
4、点击按钮的时候获取 state里面的username: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
        })

    }
<input ref="username" onChange={this.inputChange}/> 

获取input的值

getInput=()=>{

        alert(this.state.username);
    }
<button onClick={this.getInput}>获取input的值</button>

双向数据绑定

model改变影响View

view改变反过来影响model

inputChange=(e)=>{
    this.setState({

        username:e.target.value
    })

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

        username:'李四'
    })

}
<input  value={this.state.username} onChange={this.inputChange}/> 

{this.state.username}

<button onClick={this.setUsername}>改变username的值</button>

LGS

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:苏米志,敬请关注!
广告还在招~
添加新评论
暂无评论