隐藏溢出/自动滚动？

Question

对不起，标题含糊不清。我在努力思考一个能够描述我所面临问题的标题。

我想要创建一个宽度有限且隐藏溢出的框，这样当您继续按下按钮（数字）时，您会看到您正在按下的新数字，以及过去按下的数字现在隐藏在视图之外。

例如，假设我们有一个可以容纳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容器中的数字嵌套另一个容器，该容器没有设置宽度并且只是将其浮动到右侧。

CSS：

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

#digits div {
  float:right;
}

反应组件html：

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

否则，根据需要推送（）和弹出（）数字可能是最佳/反应的，如评论中所建议的那样。

Answer 2

对于您的解决方案，您需要删除第一个数字，然后再添加新数字。我假设数字变量是一个字符串。

handleClick(event)  {
    // Removes the first number from the digits.
    var newDigits = this.state.digits.substr(1);
    this.setState({digits: newDigits + event.target.value });
}