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>

否则，最好按照注释中的建议对数字进行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 });
}

隐藏的溢出/自动滚动？

2 个答案: