javascript - 无法在 React 应用程序中禁用指针事件

Question

我正在制作一个 Simon 游戏，其中有 4 个四分之一圆圈，所有圆圈的类名都是“colorButton”:红色、黄色、蓝色和绿色。

我希望当轮到计算机时，所有指向 4 个彩色圆圈的指针事件都被禁用，因此您无法点击它们。

在我的代码中我使用:

const colorButtons = document.getElementsByClassName('colorButton');
      colorButtons.style.pointerEvents = 'none';

但是我得到这个控制台错误:

Uncaught TypeError: Cannot set property 'pointerEvents' of undefined
    at App.computerMove (http://localhost:8080/bundle.js:14010:42)
    at App.startGame (http://localhost:8080/bundle.js:13997:14)

我是不是做错了什么？

引用完整代码:

import React, { Component } from 'react';

import ColorButton from './colorbutton';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      powerOn: false,
      start: false,
      myTurn: false,
      compMoves: ['red', 'yellow', 'blue', 'green'],
      myMoves: [],
      count: null
    };
    this.colors = ['green', 'red', 'yellow', 'blue'];
    this.powerOn = this.powerOn.bind(this);
    this.startGame = this.startGame.bind(this);
    this.highlightBtn = this.highlightBtn.bind(this);
    this.computerMove = this.computerMove.bind(this);
  }

  startGame() {
    const { powerOn } = this.state;
    if (powerOn) {
      this.setState({ start: true });
      this.computerMove();
    }
  }

  computerMove(){
    if (!this.state.myTurn) {
      const randNum = Math.floor(Math.random() * 4);
      const randColor = this.colors[randNum];
      const count = this.state.count;

      const colorButtons = document.getElementsByClassName('colorButton');
      colorButtons.style.pointerEvents = 'none';

      const compMoves = this.state.compMoves.slice();
      compMoves.push(randColor);

      var i=0;
      const repeatMoves = setInterval(() => {
        this.highlightBtn(compMoves[i]);
        i++;
        if (i >= compMoves.length) {
          clearInterval(repeatMoves);
        }
      }, 1000);

      this.setState({
        compMoves: compMoves,
        myTurn: true,
        count: count + 1
      });
    }
  }

  highlightBtn(color) {
    const audio = document.getElementById(color+'Sound');
    audio.play();

    const selectColor = document.getElementById(color);
    selectColor.style.opacity = 0.5;
    setTimeout(() =>{ selectColor.style.opacity = 1}, 200);
  }

  powerOn(event) {
    const { powerOn } = this.state;
    if (!powerOn) { this.setState({ powerOn: true }) }
    else { this.setState({ powerOn: false }) }
  }

  render() {
    console.log('moves:', this.state.compMoves);
    const { count } = this.state;

    return(
      <div className='container'>
        <div className='outer-circle'>
          <ColorButton
            color='green'
            handleClick={() => this.highlightBtn('green')}
          />
          <ColorButton
            color='red'
            handleClick={() => this.highlightBtn('red')}
           />
          <ColorButton
            color='yellow'
            handleClick={() => this.highlightBtn('yellow')}
          />
          <ColorButton
            color='blue'
            handleClick={() => this.highlightBtn('blue')}
          />
          <div className='inner-circle'>
            <h2>Simon®</h2>
            <div className='count-box'>
              <div className='count-display'>{count ? count : '--'}</div>
              <div className='small-text'>Count</div>
            </div>
          </div>
        </div>
        <div className='controls'>
          <div className='power-box'>
            <div className='power-text'>OFF</div>
            <label className="switch">
              <input type="checkbox" onChange={this.powerOn}/>
              <div className="slider round"></div>
            </label>
            <div className='power-text'>ON</div>
          </div>
          <div className='buttons'>
            <div className='start-box'>
              <div className='start-button' onClick={this.startGame}></div>
              <div className='small-text'>Start</div>
            </div>
            <div className='strict-box'>
              <div className='strict-button'></div>
              <div className='small-text'>Strict</div>
            </div>
          </div>
        </div>

        <p className='footer'>
          Source code on <a href='https://github.com/drhectapus/react-simon-game'>Github</a>
        </p>
      </div>
    )
  }
}

Answer 1

错误的原因是 getElementsByClassName 返回一个类数组对象。因此，它没有样式属性。因此，colorButtons.style 是未定义的，colorButtons.style.pointerEvents 会导致您的错误。

我还要指出的是，您的一般方法很像是没有反应。你几乎不想像这样直接改变 DOM。使用 React，您只需定义组件应如何呈现给定的 props 和状态。改变 DOM 的一个大问题是每次触发重新渲染时，您的更改都会被删除。我会考虑处理你想用这样的东西做的事情:

<ColorButton
  color='green'
  disabled={ !this.state.myTurn }
  handleClick={() => this.highlightBtn('green')}
/>

class ColorButton extends Component {
  render() {
    return (
      <div style={{ pointerEvents: this.props.disabled ? 'none' : 'auto' }}>
        ...
      </div>
    )
  }
}