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

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;

以上是 React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定 的全部内容, 来源链接: utcz.com/z/380122.html

回到顶部