javascript - 每次点击都会 react 进度条

Question

我对 React 还很陌生。我想问你。有什么方法可以让进度条随着每次点击而加载吗？我是说。每次点击都会给我 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" />