面试题：React中如何实现基本的触摸事件处理

在React组件中，可以通过以下步骤添加触摸事件处理逻辑并打印触摸位置信息：

创建React组件：首先创建一个函数式或类式组件。
添加事件处理函数：为每个触摸事件（touchstart、touchmove、touchend）定义处理函数。
在组件中绑定事件：将这些事件处理函数绑定到组件的DOM元素上。

以下是一个函数式组件的示例：

import React, { useRef } from 'react';

const TouchComponent = () => {
  const ref = useRef(null);

  const handleTouchStart = (e) => {
    const touch = e.touches[0];
    console.log(`Touch start at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  const handleTouchMove = (e) => {
    const touch = e.touches[0];
    console.log(`Touch move at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  const handleTouchEnd = (e) => {
    const touch = e.changedTouches[0];
    console.log(`Touch end at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  return (
    <div
      ref={ref}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      style={{ width: '100vw', height: '100vh', background: 'lightgray' }}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default TouchComponent;

在上述代码中：

useRef用于创建一个可变的引用，以便在组件中访问DOM元素。
handleTouchStart、handleTouchMove 和 handleTouchEnd 分别是处理触摸开始、移动和结束事件的函数。
在 div 元素上，通过 onTouchStart、onTouchMove 和 onTouchEnd 属性绑定相应的事件处理函数。
在每个事件处理函数中，通过 e.touches[0]（触摸开始和移动事件）或 e.changedTouches[0]（触摸结束事件）获取触摸点的信息，并在控制台打印其位置。

如果是类式组件，可以这样实现：

import React, { Component } from 'react';

class TouchComponent extends Component {
  handleTouchStart = (e) => {
    const touch = e.touches[0];
    console.log(`Touch start at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  handleTouchMove = (e) => {
    const touch = e.touches[0];
    console.log(`Touch move at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  handleTouchEnd = (e) => {
    const touch = e.changedTouches[0];
    console.log(`Touch end at x: ${touch.clientX}, y: ${touch.clientY}`);
  };

  render() {
    return (
      <div
        onTouchStart={this.handleTouchStart}
        onTouchMove={this.handleTouchMove}
        onTouchEnd={this.handleTouchEnd}
        style={{ width: '100vw', height: '100vh', background: 'lightgray' }}
      >
        {/* 组件内容 */}
      </div>
    );
  }
}

export default TouchComponent;

在类式组件中，定义事件处理函数作为类的方法，并在 render 方法中绑定到 div 元素上。原理与函数式组件类似。

星途面试题库

面试题：React中如何实现基本的触摸事件处理

知识考点

面试题答案