隱藏的溢出/自動滾動？

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容器中嵌套另一個沒有數字#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>

否則，如注釋中所建議的那樣，最好根據需要對數字進行push（）和pop（）反應。

Answer 2

對於您的解決方案，您需要先刪除第一位數字，然后再添加新的數字。 我假設digits變量是一個字符串。

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