ReactJS 事件列表

ReactJS 是一个基于组件化思想的 JavaScript 框架，提供了丰富的事件处理机制，下面是 ReactJS 的事件列表及相关介绍。

通用事件

ReactJS 提供了一系列通用事件，可以在任何组件上使用。

事件绑定

onClick: 处理鼠标点击事件。

function handleClick(e) {
  console.log('Clicked!');
}

<button onClick={handleClick}>Click me</button>

onDoubleClick: 处理鼠标双击事件。

function handleDoubleClick(e) {
  console.log('Double clicked!');
}

<button onDoubleClick={handleDoubleClick}>Double click me</button>

onMouseMove: 处理鼠标移动事件。

function handleMouseMove(e) {
  console.log(`Mouse position: ${e.clientX}, ${e.clientY}`);
}

<div onMouseMove={handleMouseMove}>Move your mouse</div>

onKeyDown: 处理键盘按下事件。

function handleKeyDown(e) {
  console.log(`KeyPressed: ${e.keyCode}`);
}

<input onKeyDown={handleKeyDown} placeholder="Press a key" />

事件传参

可以在组件中将参数传递给事件处理函数。

function handleClick(e, param1, param2) {
  console.log(param1, param2);
}

<button onClick={(e) => handleClick(e, 'Hello', 'World')}>Click me</button>

表单组件事件

ReactJS的表单组件提供了一些特定的事件。

onChange

onChange事件在值改变时触发，适用于输入框和选择框等表单组件。

function handleInputChange(e) {
  console.log(`Input value: ${e.target.value}`);
}

<input type="text" onChange={handleInputChange} value="" />

onSubmit

onSubmit事件在表单提交时触发，适用于form元素，可以使用preventDefault方法阻止默认的表单提交行为。

function handleSubmit(e) {
  e.preventDefault();
  console.log('Form submitted!');
}

<form onSubmit={handleSubmit}>
  <input type="text" value="" />
  <button type="submit">Submit</button>
</form>

生命周期事件

ReactJS 的组件生命周期包含多个事件，从组件创建到销毁。下面列出了ReactJS中的生命周期事件。

mounting 阶段

当组件被加载到DOM中时，以下事件按顺序被触发：

• constructor(): 当组件被创建时调用的函数，通常用于初始化状态和绑定方法。
• static getDerivedStateFromProps(): 在组件被加载和重渲染前调用，通过比较props和state的变化来返回一个新的state对象。
• render(): 渲染组件到DOM。
• componentDidMount(): 组件第一次被渲染到DOM后调用的函数，通常用于获取远程数据和初始化第三方库。

updating 阶段

当组件状态改变或props被更新时，以下事件按顺序被触发：

• static getDerivedStateFromProps(): 在组件更新前调用，返回更新后的state。
• shouldComponentUpdate(): 决定组件是否需要更新。
• render(): 组件重新渲染到DOM。
• getSnapshotBeforeUpdate(): 获取更新前的DOM信息。
• componentDidUpdate(): 组件更新完成后调用的函数。

unmounting 阶段

当组件被从DOM中卸载时，以下事件被触发：

• componentWillUnmount(): 组件即将被卸载前调用的函数，通常用于清除计时器和取消请求。

以上是ReactJS事件列表的简要介绍，通过事件处理机制，可以实现更加复杂和交互性强的组件。