javascript - 每次点击都反应进度条

问题描述

我的反应很新。我想问你。这里有什么方法可以让每次点击都加载进度条吗？我是说。每次点击都会给我 10% 的进度条，直到 100%，然后它会重置并重新开始计数，所以我需要点击 10 次才能获得 100%

第一次点击 10% 第二次 20% ......等等等等。想要做一些事情，当你得到 100% 时，你会得到 1 分。（每 10 次点击 = 1 分（分数）。

非常感谢你！

标签： javascriptjqueryreactjs

不适合 StackOverflow 的问题，但我有空闲时间和兴趣。请阅读所有这些。

单击更改状态（添加 10）
state 决定 div 宽度

class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      score: 0
    };    
  }

  render() {
    const style = {
      width: this.state.width + '%'
    };
  
    return (
      <div className="wrapper" onClick={(e) => { this.handleClick(e); }}>
        {'Score: ' + this.state.score} <br />
        {this.state.width + '%'}
        <div className="bar" style={style} />
      </div>
    );
  }
  
  handleClick(e) {
    this.setState(state => {
      if (state.width + 10 === 100) {
        return { width: 0, score: state.score + 1 };
      }
      return { width: state.width + 10 };
    });
  }
}

ReactDOM.render(<ProgressBar />, document.getElementById('root'));

.wrapper {
  width: 100%;
  height: 300px;
  background: #eee;
  cursor: pointer;
}

.bar {
  width: 0;
  height: 20px;
  transition: width 0.3s;
  background: #ec6161;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<div id="root" />

javascript - 每次点击都反应进度条

问题描述

解决方案

推荐阅读