javascript - 在 React 中构建 360 度图像的简单组件

Question

我正在尝试构建一个 React 组件来显示产品的 360 度 View 。我正在尝试转换 this该脚本使用 jQuery 将可拖动的 360 度产品图像显示到 React 组件中。

该脚本的工作方式是首先加载大约 20 个产品图像，每个 Angular 最多 360 度。然后，使用 jQuery，根据鼠标单击和移动事件自动切换图像。

作为我的 React 组件的一部分，我已设法从文件夹加载图像，并尝试根据鼠标单击和移动事件切换图像。另外，我发现this文章创建了图像的 3D 透视图，并为 React 合成事件提供了一些有用的函数。

如何使用 React 合成事件来捕获鼠标单击和移动事件，以便切换到数组中的下一个图像？

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {


  render() {
    // var foo = new Array(36);
    var N = 37; 
    var imageCount = Array.apply(null, {length: N}).map(Number.call, Number)
    imageCount.shift()
    console.log(imageCount)
    let images = imageCount.map( (name, index) => {
            return <img key={index} className="img-responsive" alt="" src={require(`./360-demo/${name}.jpg`)} />
        } );

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        {images}
      </div>
    );
  }
}

export default App;

一旦我获得了一个可用的组件，我计划开源该代码，以便其他人也能受益。

Answer 1

您可以从 onMouseDown 开始跟踪旋转，这意味着拖动必须源自组件内。对于移动和旋转停止，您可以使用 onMouseMove 和 onMouseUp，但最好附加到文档中。一般来说，我不建议在 React 中触摸 document，但是使用组件上的事件处理程序，它不会检测到组件外部的移动(就像 jQuery 那样)。

其要点如下:

handleMouseDown = event => {
  this.setState({
    dragging: true,
    dragStart: event.screenX,
  });
};

handleMouseUp = () => {
  this.setState({ dragging: false });
};

handleMouseMove = event => {
  if (this.state.dragging) {
    const position = event.screenX;
    // <-- update your image index
  }
};

render = () => {
  return (
    <div onMouseDown={this.handleMouseDown}>
      {this.renderImage()}
    </div>
  );
};

componentDidMount = () => {
  document.addEventListener('mousemove', this.handleMouseMove, false);
  document.addEventListener('mouseup', this.handleMouseUp, false);
};

componentWillUnmount = () => {
  document.removeEventListener('mousemove', this.handleMouseMove, false);
  document.removeEventListener('mouseup', this.handleMouseUp, false);
};

这是一个带有工作示例的沙箱:https://codesandbox.io/s/6v3491kxw3