Javascript Can'；t在React应用程序中禁用指针事件

我正在制作一个Simon游戏，其中有四个四分之一的圆圈，所有圆圈的类名都是“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>
    )
  }
}

import React，{Component}来自'React'；
从“./ColorButton”导入ColorButton；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
powerOn:false，
开始：错，
轮到我了：错，
compMoves:[“红色”、“黄色”、“蓝色”、“绿色”]，
myMoves:[]，
计数：空
};
this.colors=[“绿色”、“红色”、“黄色”、“蓝色”]；
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；
如果（通电）{
this.setState（{start:true}）；
这是我的；
}
}
computerMove（）{
如果（！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（（）=>{
此.highlightBtn（compMoves[i]）；
i++；
如果（i>=compMoves.length）{
清除间隔（重复移动）；
}
}, 1000);
这是我的国家({
compMoves:compMoves，
轮到我了：是的，
计数：计数+1
});
}
}
highlightBtn（彩色）{
const audio=document.getElementById（颜色+声音）；
音频播放（）；
const selectColor=document.getElementById（颜色）；
选择color.style.opacity=0.5；
setTimeout（（）=>{selectColor.style.opacity=1}，200）；
}
通电（事件）{
const{powerOn}=this.state；
如果（！powerOn）{this.setState（{powerOn:true}）}
else{this.setState（{powerOn:false}）}
}
render（）{
log（'moves:'，this.state.compMoves）；
const{count}=this.state；
返回(
this.highlightBtn（'green'）}
/>
this.highlightBtn（'red'）}
/>
this.highlightBtn（'yellow'）}
/>
this.highlightBtn（'blue'）}
/>
西蒙®
{count？count:'--'}
计数
关
在…上
开始
严格的

源代码

)
}
}

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

我还要指出的是，你的一般方法是相当不反应的。您几乎不想像这样直接改变DOM。使用React，您只是定义组件应该如何呈现给定的道具和状态。改变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>
    )
  }
}

this.highlightBtn（'green'）}
/>
类ColorButton扩展组件{
render（）{
返回(
...
)
}
}

谢谢你的建议-我明白你的意思。我没有想到通过样式道具操纵dom。我在我的

highlightBtn（color）

函数中也犯了同样的错误吗？是的，应该避免在那里犯同样的错误。您几乎永远不会希望在组件中像这样查询和更新DOM。相反，更新状态将触发重新渲染以进行更新。