Question

我是React的新手，我正在开发这款游戏，游戏中的随机对象从孔中出现。如果您单击好对象，则会增加得分；如果您单击坏对象，则会增加得分。

我已经使1个对象随机出现，并且单击它会添加得分，并且不会出现在相同位置。但是当我尝试增加第二个分数时，它总是出现在相同的位置，并且比分停止工作。这是一些代码

  clearFishes(){
for(let value in this.state){
  if (!isNaN(value)){
    this.setState({
      [value]: 'translate(0, 110%)'
    });
  }
} }

displayFishes(){
let activeFish = Math.ceil(Math.random() * 12);
if (this.state.lastFish[0] === activeFish){
  this.displayFishes();
  return;
}
this.clearFishes();
this.setState({
  [activeFish]: 'translate(0, 15%)',
  lastFish: [activeFish]
}); }



lockOutClick(){
window.setTimeout(() => {
  this.setState({ fishHasBeenClicked: false })
}, 350) }

addToScore(e){
if (this.state.fishHasBeenClicked){ return; }
let target = e.target;
target.parentNode.classList.add('game__cross');
target.classList.add('no-background');
this.lockOutClick();
this.setState({
  background: '75px',
  fishHasBeenClicked: true,
  score: [parseInt(this.state.score, 0) + 1]
});
window.setTimeout(function(){
  target.parentNode.classList.remove('game__cross');
  target.classList.remove('no-background');
}, 500)}

Answer 1

子元素永远不能直接访问父元素。这种方法违反了React的哲学。您应该多读一些React哲学。

target.parentNode.classList.add('game__cross');
target.classList.add('no-background');

请使用此直接方法以外的其他方法。例如，在useState中存储一个变量。

反应2个随机对象以不断出现

1 个答案: