javascript - overflow hidden /自动滚动？

Question

抱歉标题模糊。我努力想一个标题来描述我面临的问题。

我想创建一个宽度有限且 overflow hidden 的框，以便当您继续按下按钮(数字)时，您会看到正在按下的新数字，而过去按下的数字现在从 View 中隐藏.

例如，假设我们有一个可以容纳 5 位数字的盒子。起初我按 1，然后按 3、9、4 和 5，显示:

13945

如果我接下来按 6 和 2，我会想要显示:

94562

如何在给定以下组件的情况下实现此样式？谢谢!

class App extends React.Component {
    constructor() {
    super();
    this.state = {
      digits: 0
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event)  {
    this.setState({digits: this.state.digits + event.target.value });
  }

  render() {
    return (
      <div>
        <div id="digits">{this.state.digits}</div>
        <input value={this.state.digits} />
        <button onClick={this.handleClick} value={1}>1</button>
        <button onClick={this.handleClick} value={2}>2</button>
        <button onClick={this.handleClick} value={3}>3</button>
        <button onClick={this.handleClick} value={4}>4</button>
        <button onClick={this.handleClick} value={5}>5</button>
      </div>
    );
  }
}



ReactDOM.render(<App />, app);

#digits {
  border: 2px solid red;
  width: 40px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>

Answer 1

如果你想保留 HTML 中的所有数字，你可以在你的 #digits 容器中嵌套数字的另一个容器，它没有设置宽度，只是将它 float 到右边.

CSS:

#digits {
  border: 2px solid red;
  width: 40px;
  overflow: hidden;
}

#digits div {
  float:right;
}

react 组件 html:

<div id="digits">
  <div>{this.state.digits}</div>
</div>

否则，最好/根据需要对数字进行 push() 和 pop() react ，如评论中所建议的那样。