隐藏的溢出/自动滚动?

时间:2018-08-29 16:40:44

标签: javascript html css reactjs

抱歉,标题含糊。我努力思考一个标题,该标题可以描述我面临的问题。

我想创建一个宽度有限且隐藏溢出的框,以便在继续按按钮(数字)时,可以看到正在按的新数字,而过去所按的数字现在从视图中隐藏了

例如,假设我们有一个可以容纳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>

2 个答案:

答案 0 :(得分:2)

如果您希望将所有数字保留在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()反应。

答案 1 :(得分:1)

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

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