javascript - 创建一个填充 React 的按钮

Question

我是新来的，我有个问题找不到答案..

我目前正在使用 ReactJS 开发一个网站，我希望有一个按钮在用户点击它时自动填充。该按钮总共应该有 5 个阶段。

我并不是要求您为我编写代码，而只是帮助我找到解决此问题的最佳方法。

那么我到底在问什么？正如您在此处看到的

它是一个盒装元素，每当用户点击它时(它可以点击整个元素)，进度就会填充，变成这样

所以第一行现在被标记了。当用户再次按下它时，第二个栏会填充

重要 - 这些栏内将有文本填充。

到目前为止我做了什么？我一直在考虑每次用户按下元素时都有 5 个不同的图像，但我想知道是否可能是一种更好的方法(比如让 DIV 背景图像，并在用户按下时填充子 div...)

我希望我说清楚了，谢谢大家抽出宝贵时间!

Answer 1

这是一个工作示例。您不需要所有不同状态的图像。使用 HTML 动态执行此操作要灵活得多。

关键是跟踪按钮被点击的次数。在此示例中，它使用 currentState 来跟踪它被点击的次数。

const defaultStyle = {
  width: 100,
  padding: 5,
};

class MultiLevelButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      currentState: 0,
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    const { currentState } = this.state;
    
    if (currentState < this.props.states.length) {
      this.setState({
        currentState: currentState + 1,
      });
    }
  }
  
  reset() {
    this.setState({
      currentState: 0,
    });
  }
  
  render() {
    const { currentState } = this.state;
    const { states } = this.props;
    
    return (
      <button onClick={this.handleClick} style={{border: 'none', outline: 'none'}}>
        {
          states
            .map((s, i) => {
              const stateNumber = states.length - i;
              const overrides = stateNumber <= currentState ? { backgroundColor: '#000', color: '#fff' } : {};
              const style = {
                ...defaultStyle,
                backgroundColor: s,
                ...overrides,
              };
              return <div style={{...style}}>{stateNumber}</div>
            })
        }
      </button>
    )
  }
}

const buttonRef = React.createRef();

ReactDOM.render(
  <div>
    <MultiLevelButton ref={buttonRef} states={['#bbb', '#ccc', '#ddd', '#eee', '#fff']} />
    <MultiLevelButton states={['#fcc', '#cfc', '#ccf']} />
    <div>
      <button onClick={() => buttonRef.current.reset()}>Reset</button>
    </div>
  </div>,
  document.getElementById('app')
);

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

<div id="app" />