React的事件处理函数
我们看一个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入组件标签类型声明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
addNum = (event) => {
// 这里的this指向Demo的实例化对象
event.target.value++;
};
render() {
return (
<div>
<input type="text" onBlur={
this.addNum} value={
1} />
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
</body>
</html>
这段代码展示了一个输入框，每当输入框失去焦点时，其内的值进行一次自增
在React中，使用箭头函数来定义事件处理器函数，它可以确保事件处理程序方法中的this关键字绑定到组件实例上：
class Demo extends React.Component {
addNum = (event) => {
// 这里的this指向Demo的实例化对象
event.target.value++;
};
render() {
return (
<div>
<input type="text" onBlur={
this.addNum} value={
1} />
</div>
);
}
}
在上面的例子中，我们使用箭头函数定义了addNum方法，并将其用作 onBlur事件的处理程序。
如果我们addNum不使用箭头函数的写法，那我们需要借助bind来改变this指向
class Demo extends React.Component {
addNum(event){
// 这里的this指向Demo的实例化对象
event.target.value++;
};
render() {
return (
<div>
<input type="text" onBlur={
this.addNum.bind(this)} value={
1} />
</div>
);
}
}
React事件处理函数的名称
我们可以注意到，react的时间函数和原生标签的处理函数是不一样的，原生事件的名称是onxxxx，而react中的事件名称是onXxxx。
React事件的命名约定是使用驼峰命名法，因此React事件应该使用"onClick"而不是"onclick"。实际上，"onclick"是原生JavaScript事件的命名方式。虽然在React中使用"onclick"也可以触发事件，但是这是一种不规范的做法，因为这种命名方式不符合React官方的规定。如果你将事件命名为"onclick"，可能会导致其他开发人员的困惑和不适应，并且在某些情况下可能会产生意想不到的Bug。因此，为了避免这种问题，最好还是按照React官方的规定来使用"onClick"来命名React事件。
React的事件是通过事件委托方式处理的
在这个示例中，我们的事件是虽然写在input标签上的，但实际上，所有事件都是由根节点（
React的事件触发源
在这个示例中，我们通过event来访问input的value值，event是React事件处理函数中，可以访问的一个对象，它是React封装的合成事件对象，用来存储和管理事件的相关信息。该对象包含了很多实用的属性和方法，例如：
- event.target：事件发生的目标元素
- event.preventDefault()：阻止事件的默认行为
- event.stopPropagation()：停止事件的传播
- event.nativeEvent：原生的DOM事件对象
我们可以看看event的值
addNum = (event) => {
console.log(event);
// 这里的this指向Demo的实例化对象
event.target.value++;
};
可以看出，event.target就是触发事件的input标签这个节点Dom元素，因此，我们可以通过event.target.value拿到其值。
