在 React 中为 360 度图像构建一个简单的组件

Question

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

此脚本的工作方式是首先加载大约 20 个产品的每个角度最多 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