javascript - 为每个形状应用样式

Question

我有一个应用程序，上面有 2 个 coubes。我尝试使用鼠标光标的拖动操作来旋转每个 coube。不幸的是，我没有管理和旋转样式无法正常工作。

export default function App() {
  const myref = useRef(data.map(() => createRef()));
  const [offSet, setOffset] = React.useState(0);
  const [startX, setStartX] = useState(null);

  const rotate = e => {
    console.log("ev");
    setStartX(e.pageX - offSet);
  };

  const stopRotate = () => {
    setStartX(null);
  };

  const detectDirection = e => {
    if (startX) {
      setOffset(e.pageX - startX);
      console.log(offSet);
      myref.current.map(
        ref => (ref.current.style.transform = `rotateY(${offSet}deg)`)
      );
    }
  };

  return (
    <div className="App">
      <div className="wrapper">
        {data.map((i, k) => {
          return (
            <div
              ref={myref.current[k]}
              onMouseOut={stopRotate}
              onMouseDown={rotate}
              onMouseMove={detectDirection}
              className={`box box-nr-${i.id}`}
              key={k}
            >
              {i.title}
              <div className="side left" />
              <div className="side right" />
              <div className="side front" />
              <div className="side back" />
            </div>
          );
        })}
      </div>
    </div>
  );
}

如何使用拖动动作旋转每个形状？现在，当我尝试旋转时，我都旋转了，而且动作不起作用。我希望根据您拖动的形状水平旋转它，但不能同时旋​​转两者。这个怎么做？

我想做这样的事情，但只能水平旋转：https ://codepen.io/Ra1ny/pen/LdwOGG?editors=1111

标签： javascriptreactjs

Answer 1

这是您的 Cube 组件的代码（未经测试）：

function Cube(props) {
    const myref = useRef();
    const [offSet, setOffset] = React.useState(0);
    const [startX, setStartX] = useState(null);

    const rotate = e => {
        console.log("ev");
        setStartX(e.pageX - offSet);
    };

    const stopRotate = () => {
        setStartX(null);
    };

    const detectDirection = e => {
        if (startX) {
            setOffset(e.pageX - startX);
            console.log(offSet);
            myref.current.style.transform = `rotateY(${offSet}deg)`;
        }
    };

    return (
        <div
            ref={myref}
            onMouseOut={stopRotate}
            onMouseDown={rotate}
            onMouseMove={detectDirection}
            className={`box box-nr-${props.i.id}`}
            key={k}
        >
            {props.i.title}
            <div className="side left" />
            <div className="side right" />
            <div className="side front" />
            <div className="side back" />
        </div>
    )
}

然后在您的 App 渲染中：

<div className="App">
  <div className="wrapper">
    {data.map((i, k) => {
      return (
           <Cube key={k} i={i} />
       );
    })}
  </div>
</div>