事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault() & 关于事件函数的this处理-使用箭头函数 & 给事件函数传递参数用法-onClick
- 事件绑定方式
// handle为函数名称
<button onClick={this.handle}>点击</button>
class TestEvent extends React.Component {
constructor(props) {
super(props);
this.state = {
num: 0
}
}
handle = () => {
// console.log('nihao')
this.setState({
num: this.state.num + 1
})
}
render() {
return (
<div>
<div>事件处理</div>
<div>{this.state.num}</div>
<button onClick={this.handle}>点击</button>
</div>
)
}
}
- 不能使用return false的方式阻止默认行为,必须使用preventDefault
function ActionLink() {
function handle(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handle}>跳转</a>
);
}
-
React的事件对象是合成对象,没有兼容问题
-
事件函数中的this问题
-
在构造函数中绑定
this.handle = this.handle.bind(this) handle = function () { console.log(this) }
-
使用箭头函数
handle = () => { vthis.setState({ num: this.state.num + 1 }) }
-
-
事件传参
let tagList = this.state.list.map(item => {
// return <li onClick={this.handleItem.bind(this, item.id)} key={item.id}>{item.bname}</li>
// return <li onClick={(e) => {this.handleItem(item.id, e)}} key={item.id}>{item.bname}</li>
return <li data-id={item.id} onClick={(e) => {this.handleItem(item.id, e)}} key={item.id}>{item.bname}</li>
})
实例
第一步:src下新建文件夹components,下面新建07.js
/*
事件处理
*/
import React from 'react'
class TestEvent extends React.Component {
constructor (props) {
super(props);
this.state = {
num: 1
}
// 对于普通事件函数需要进行如下绑定
this.testThis = this.testThis.bind(this)
}
handle = () => {
this.setState({
num: 2
})
}
handleJump = (e) => {
console.log(e)
// 事件对象e并不是标准的元素DOM事件对象,而是React自己合成的一个事件对象,但是兼容原生事件对象,并且没有浏览器兼容问题
// 阻止a标签的默认行为
// 如下的方式无法做到
// return false;
// 必须使用如下方式才可以
e.preventDefault()
}
testThis () {
// 默认情况下,普通函数中的this是undefined
console.log(this)
}
// testThis = function () {
// console.log(this)
// }
// handleParam = (a, b, e) => {
// console.log(a, b)
// console.log(e.target.tagName)
// }
handleParam = (e) => {
console.log(e.target.tagName)
console.log(e.target.dataset.msg)
console.log(e.target.dataset.info)
}
render () {
return (
<div>
<div>事件处理</div>
<div>
<div>{this.state.num}</div>
<button onClick={this.handle}>点击</button>
<a href="http://baidu.com" onClick={this.handleJump}>百度</a>
</div>
<div>
<button onClick={this.testThis}>测试this</button>
</div>
<div>
{/*<button onClick={this.handleParam.bind(this, 'tom', 'jerry')}>测试参数传递</button>*/}
{/*<button onClick={(e) => {this.handleParam('spike', 'kitty', e)}}>测试参数传递</button>*/}
<button data-msg='tom' data-info='jerry' onClick={this.handleParam}>点击</button>
</div>
</div>
)
}
}
export default TestEvent
第二步:App.js中进行引入
import React from 'react';
import './App.css';
import TestEvent from './component/07-事件处理'
function App () {
return (
<div>
<TestEvent/>
</div>
)
}
export default App;
npm run start打开界面,显示