所有的demo源码:https://github.com/Ching-Lee/react-base
1.与html事件处理的不同
1.1.事件调用的不同
html使用字符串作为事件处理函数
<button onclick="activateLasers()">
Activate Lasers
</button>
react使用表达式作为事件处理函数
<button onClick={activateLasers}>
Activate Lasers
</button>
1.2 阻止默认行为
不能使用return false来组织默认行为
//html可以使用return false组织默认行为
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
//React需使用preventDefault方法
//这里的e是一个合成事件，根据W3C标准进行的合成，无需担心浏览器兼容问题
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
1.3 demo07事件的绑定
点击按钮ON变为OFF
on
off
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
class Toggle extends React.Component{
constructor(props){
super(props);
//默认按钮是开的
this.state={isToggleOn:true};
//解决handleClick中this的绑定,方法1
//this.handleClick=this.handleClick.bind(this);
}
//这里必须注意handleClick方法中this的绑定，如果不绑定this为undefined
// 我们希望将this绑定到Toggle类创建的对象上，有两种解决方法
handleClick(){
//箭头函数，表示参数是preState，当参数只有一个时()可以省略。
// 返回了一个对象，只有一个return语句时，{}和return可以省略，返回对象时要在对象外加()。
this.setState(preState=>({isToggleOn:!preState.isToggleOn}));
}
render(){
//解决 handleClick方法中this的绑定，可以使用箭头函数，箭头函数中的this作用域为定义时的作用域
return(
<button onClick={e=>this.handleClick(e)}>
{this.state.isToggleOn?'ON':'OFF'}
</button>
);
}
}
ReactDOM.render(<Toggle/>,document.body);
</script>
</body>
</html>
事件传递参数时this的处理
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1.4 事件与数据的双向绑定
父组件通过props传递参数。
子组件通过onChange事件，去改变父组件的state对象。
2.React中的事件对象（event中的对象和方法）
-
通用事件
通用事件 -
键盘事件
键盘事件 -
焦点事件
图片.png -
按键事件
按键事件 -
鼠标事件
-
触摸事件
