Question

1）我正在尝试自动滚动到列表组中的下一项。例如，如果用户回答第一个问题，它将自动滚动到第二个问题。（反应）并在onSubmit上滚动到第一个未回答的问题
2）当用户在移动设备视图中查看此列表时，“ YES”或“ NO”单选按钮应显示在中间，并且“ SUBMIT AND CLEAR BUTTON（BOOTSTRAP）”也应显示
3）如何知道从下拉菜单中选择了哪个项目并将其显示在控制台中。

Code

Answer 1

有许多方法可以实现。一种方法是添加一个通过“香草js”滚动到表单中某个项目的方法，然后在onInputChanged方法的两个onSubmut中使用该方法。

您可以在组件中将此函数定义为：

  // 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'
      }
    });

    ...
 }

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

<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

希望这会有所帮助！

自动向下滚动到下一个列表组项目，并在移动视图的中央位置显示内容（反应）

1 个答案: