Question

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

第一次点击10％，第二次20％...等等。想做出类似的事情，当您获得100％时，您将获得1分。（每10次点击= 1点（得分）。

非常感谢你！

Answer 1

对于StackOverflow来说不是合适的问题，但是我有空闲时间和兴趣。请阅读all of this。

点击更改状态（添加10）
状态确定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" />

Answer 2

一种方法是：

采用progress标签将其状态初始设置为10％this.state = {percent: 10}。 progress tag通过必要的界限
在按钮或进度条本身上添加onClick()处理程序，并触发this.setState({percent: this.state.percent + 10})方法
将this.state.percent传递到value标签的progress属性

每次点击反应进度条

2 个答案: