Как правильно определить колесо мыши в ReactJS - PullRequest
Новая
       4

Как правильно определить колесо мыши в ReactJS

2 голосов
/ 01 октября 2019

Может быть, кто-то знает, как починить мою сумку.

У меня проблема с обнаружением колеса вверх и вниз, также это проблема с трекпадом MAC OS.

Мне нужно увеличитьукажите 1 (см. код), если я поверну вниз, и уменьшу на 1, если вверх. НО, ЕСЛИ Я ПРОКРУТИВАЮ, ЭТО ТАК МНОГИЕ НАЗНАЧЕНИЯ, И ТО ЖЕ, ЕСЛИ. Мне не нужна прокрутка страницы.

Мой код выглядит так: 

const pages = [
  { name: "About", page: <About />, id: 1 },
  { name: "Contact", page: <Contact />, id: 2 },
  { name: "Hire Us", page: <HireUs />, id: 3 },
  { name: "Home", page: <Home />, id: 4 },
  { name: "Works", page: <Works />, id: 5 }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      item: 1
    };
  }
  scrollSite(y) {
    const pageLenght = pages.length - 1;
    if (y < 0) {
      console.log("slide up");
      if (this.state.item < pageLenght) {
        this.setState({ item: this.state.item + 1 });
      } else if (this.state.item === pageLenght) {
        this.setState({ item: 0 });
      }
    } else {
      console.log("slide down");
      if (this.state.item === 0) {
        this.setState({ item: this.state.item - 1 });
      } else if (this.state.item === pageLenght) {
        this.setState({ item: 0 });
      }
    }
  }
  componentDidMount() {
    window.addEventListener("wheel", e => {
      this.scrollSite(e.wheelDelta);
    });
  }
  render() {
    const { item } = this.state;
    return (
      <div className="container">
        <div className="navigation">
          {pages.map(page => (
            <div key={page.id}>{page.name}</div>
          ))}
        </div>
        <div>{pages[item].page}</div>
      </div>
    );
  }
}

export default App;

1 Ответ

1 голос
/ 01 октября 2019

Вы можете добавить прослушиватель событий, используя javascript следующим образом 

window.addEventListener("wheel", event => {
 // Your code
});

или вы можете добавить onWheel непосредственно на элемент 

<div onWheel = {(e) => this.onWheel(e)} >
...