有多种方法可以实现这一点。一种方法是通过“vanilla js”添加一个滚动到表单中项目的方法，然后在两个onInputChangedononSubmut方法中使用它。

你可以在你的组件中定义这个函数：

  // Scrolls the list to a list item by list item index
  scrollToItemByIndex = (index) => {

    // Find the list item element (by index), and scroll wrapper element 
    const scrollItem = document.querySelector(`[scrollIndex="${ (index) }"]`)
    const scrollWrapper = document.querySelector(`[scrollWrapper="scrollWrapper"]`)

    if(scrollItem && scrollWrapper) {

      // If list item found in DOM, get the top offset
      const itemRect = scrollItem.offsetTop // [UPDATED]
      const wrapperRect = scrollWrapper.offsetTop // [UPDATED]

      // Scroll the wrapper to the offset of the list item we're scrolling to
      scrollWrapper.scrollTo(0, itemRect - wrapperRect)
    }
  }

onInputChange然后可以按如下方式更新您的函数：

 onInputChange = ({ target }) => {
    const { cards } = this.state;
    const { options } = this.state;

    const nexState = cards.map((card, index) => {
      if (card.cardName !== target.name) return card;

      const options = card.options.map(opt => {
        const checked = opt.radioName === target.value;
        return {
          ...opt,
          selected: checked
        }
      })

      // [ADD] When input changes (ie something is set), scroll to next item
      this.scrollToItemByIndex( index + 1 )

      const style = options.every(option => !option.selected) ? 'danger' : 'info'

      return {
        ...card,
        style,
        options
      }
    });
    this.setState({ cards: nexState })
  }

此外，您onSubmit将被更新以滚动到任何无效的表单项：

 onSubmit = () => {

    this.state.cards.forEach((card, index) => {
      var invalid = card.options.every(option => !option.selected)
      if (invalid) {
        card.style = 'danger'

        // [ADD] this item has invalid input, so scroll to it
        this.scrollToItemByIndex(index)

      }
      else {
        card.style = 'info'
      }
    });

    ...
 }

最后，您需要使用以下内容更新组件的渲染方法，以确保上面的查询选择器正确运行：

<ul class="nav nav-pills nav-stacked anyClass" scrollWrapper="scrollWrapper">

和：

{cards.map((card, idx) => (<ListGroup bsStyle="custom" scrollIndex={idx}>
    ... 
</  ListGroup   >)}

[更新] 完整的工作示例可以在这里找到：https : //stackblitz.com/edit/react-z7nhgd?file=index.js

希望这可以帮助！