React多步骤表单与列表滚动：如何实现统一Previous按钮功能

没问题，我来帮你调整这段代码，实现点击「Previous」按钮直接滚动回到第一个列表项的功能～

其实你的核心逻辑已经写好了，只需要做两处简单修改：

• 移除原来的三个索引按钮，替换成一个统一的「Previous」按钮
• 给这个按钮绑定点击事件时，直接传入目标索引0（也就是第一个列表项的位置）

下面是修改后的完整代码：

var items = [];
for (var i = 0; i < 100; i++) {
  items.push(i);
}
var List = React.createClass({
  getInitialState: function() {
    return {index: 0};
  },
  handleShow: function(i) {
    this.setState({index: i});
    this.refs[i].scrollIntoView({block: 'end', behavior: 'smooth'});
  },
  render: function() {
    return(
      <div>
        <ul>{items.map(function(item, i) {return <li ref={i}>{item}</li>})}</ul>
        {/* 替换成单个Previous按钮，绑定到索引0 */}
        <button onClick={this.handleShow.bind(this, 0)}>Previous</button>
        {this.state.index}
      </div>
    );
  }
});

小说明 #

你的handleShow方法本身已经完美实现了「更新状态+平滑滚动到对应项」的逻辑，所以直接复用这个方法，传入第一个列表项的索引0就完成需求啦。如果之后你想改成回到上一次浏览的项（而不是固定第一个），可以额外维护一个prevIndex状态来记录上一个索引，但根据你当前的需求（回到第一个问题），上面的代码完全够用。

内容的提问来源于stack exchange，提问作者user6687933