老规矩,先看完官方文档,记录学习笔记: 教程:https://www.runoob.com/react/react-tutorial.html 文档:http://caibaojian.com/react/
react模板注释,和平时不太一样,使用快捷键ctrl+/
在触发DOM
上的某个事件的时候,会产生一个事件对象event
,这个对象中包含着所有与事件有关的信息。
当我们触发run
方法的时候,想监听事件方法的时候,需要写出event
,打印出来看这个事件对象是什么东西,打开控制台看一下。
run=(event)=>{
console.log(event)
}
比如:当我们点击按钮的时候,需要让按钮的颜色改变一下,变成红色的。
首先获取当前执行事件的dom节点。
run=(event)=>{
//console.log(event)
alert(event.target);
}
好的,以上获取到了dom节点了,然后要改变当前dom节点的颜色。
run=(event)=>{
//console.log(event)
alert(event.target);
event.target.style.background='red';
}
获取当前执行事件button按钮自定义的属性
run=(event)=>{
//console.log(event)
event.target.style.background='red';
//获取dom属性
alert(event.target.getAttribute('id'))
}
<button id="123" onClick={this.run}>点击</button>
Home.js
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
constructor() {
super();
//react定义数据
this.state = {
msg: '我是王小婷定义的数据OO'
}
}
run = (event) => {
//console.log(event)
event.target.style.background = 'red';
//获取dom属性
alert(event.target.getAttribute('id'))
}
render() {
return (
<div>
<button id="123" onClick={this.run}>点击</button>
</div>
)
}
}
export default Home;