事件对象
注释写法
{/* */}
一.获取执行事件的dom节点
run=(event)=>{
alert(event.target);/**获取执行事件的dom节点**/
//改变dom样式
event.target.style.background='red';
//获取dom属性
alert(event.target.getAttribute('id'));
}二.表单事件
点击按钮，获取input表单的值
{/* 获取表单的值
1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 事件对象
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username
*/}
<input onChange={this.inputChange}/>
<button onClick={this.getInput}>获取input的值</button>
inputChange=(e)=>{
// console.log('111');
//获取表单的值
console.log(e.target.value);
this.setState({
username:e.target.value
})
}
getInput=()=>{
alert(this.state.username);
}
整体参考代码
/*
事件对象 、键盘事件、 表单事件 、ref获取dom节点、React实现类似vue双休数据绑定
事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
*/
import React from 'react';
import '../assets/css/index.css';
class Home extends React.Component{
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
constructor(props){
super(props); //固定写法
this.state={
msg:'我是一个home组件',
username:''
}
}
run=(event)=>{
// alert(this.state.msg);
// console.log(event);
// alert(event.target); /*获取执行事件的dom节点*/
event.target.style.background='red';
//获取dom的属性
alert(event.target.getAttribute('aid'))
}
inputChange=(e)=>{
// console.log('111');
//获取表单的值
console.log(e.target.value);
this.setState({
username:e.target.value
})
}
getInput=()=>{
alert(this.state.username);
}
render(){
return(
<div>
{this.state.msg}
{/* 事件对象 */}
<h2>事件对象演示</h2>
<button aid="123" onClick={this.run}>事件对象</button>
<br /><br /> <hr />
<h2>表单事件</h2>
{/* 获取表单的值
1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 事件对象
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username
*/}
<input onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>
<br /><br /> <hr />
</div>
)
}
}
export default Home;
三.通过ref获取表单节点
ref（VUE中也有）
首先给dom取ref名字
<input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>通过this.refs.username 获取dom节点
inputChange=()=>{
/*
获取dom节点
1、给元素定义ref属性
<input ref="username" />
2、通过this.refs.username 获取dom节点
*/
let val=this.refs.username.value;
this.setState({
username:val
})
}
整体参考代码
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);
}
//键盘事件
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>
{/* 获取表单的值
1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 ref获取
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username
*/}
<input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>
<br /><br /> <hr />
<h2>键盘事件</h2>
<input onKeyUp={this.inputKeyUp}/>
<br /><br />
<input onKeyDown={this.inputonKeyDown}/>
</div>
);
}
}
export default List;四.键盘事件
参考如上第三部分整体代码。
五.实现类似Vue的双向数据绑定
Model改变影响View
View改变反过来影响Model
- 首先input的value绑定state（只写这个会报错，提醒必须填写onchange方法。不报错需要填写成defaultvalue）
<input value={this.state.username} 2.填写onchange方法
<input value={this.state.username} onChange={this.inputChange}/>
inputChange=(e)=>{
this.setState({
username:e.target.value
})
}
3.撒旦
整体代码
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}/>
<p> {this.state.username}</p>
<button onClick={this.setUsername}>改变username的值</button>
</div>
);
}
}
export default Todolist;
