Question

好的。因此，我想为举行测验的朋友提出“无意义记分牌”应用程序。对于不知道的人，Pointless是游戏节目的名称。以下是我要实现的目标（https://www.youtube.com/watch?v=cmdAQHzNYF8）的片段。是的，所以我的应用程序组件看起来像这样

import React, { Component } from 'react';
import Countdown from './components/Countdown';
import StartCountdownForm from './components/StartCountdownForm';

import './App.css';

class App extends Component {

  state = {
    points: [],
    score: 100,
    targetScore: 0,
  };

  componentWillMount() {
    let p = [];
    for (let i = 0; i < 100; i++) {
      p.push(<div className="point"></div>);
    }
    this.setState({
      points: p
    });
  }
  removeTopPoint () {
    var tmp = this.state.points; 
    tmp.splice(0, 1);
    this.setState( prevState => ({
      score: prevState.score -= 1,
      poins: tmp
    }));
  }

  render() {
    return (
      <div className="pointless-container">
        <Countdown score={this.state.score} />
          <div className="points-container">
          { this.state.points.map( (point, index) =>
            <div className="point"
              key={index}></div>
            )}
          </div>
          <StartCountdownForm />
      </div>
    );
  }
}

export default App;

好吧，首先我不太了解如何正确启动我的点阵。我尝试以状态启动它（有类似的要点：new Array（100）），但是我无法使其工作。我所看到的方式只需要一个具有100个位置的数组就足够了，但是我可能错了，我欢迎实现它的其他方法。到目前为止，我使用componentWillMount-function填充数组，然后遍历整个数组以每次打印出相同的div。是的，我知道它很弱智，但是我不知道如何正确地做到这一点。所以这是第一件事。其次，我希望用户可以输入一个目标分数，使倒计时停止在该分数上。我写了函数removeTopPoint（），它有点用。因此，我认为应该可以一遍又一遍地调用此函数，直到借助setInterval（）之类的东西达到目标分数为止。但是我正在努力使其发挥作用。我得到的最接近的数字使倒数停止在目标分数上，但所有分数都同时删除。我希望他们一一消失。在删除它之前，我可能还想先在每个点上添加一个类，以便可以产生与实际表演类似的效果。我这里没有包括Countdown组件或StartCountdownForm组件，因为到目前为止它们实际上还没有编写任何逻辑。希望有人能帮忙！我真的很感激。

需要帮助以React.js制作无意义记分板

0 个答案: