如何通过编程更改RowList当前焦点项？单行RowList能否设非首个焦点项？

Hey there! Great questions—let’s break them down clearly for you:

1. Can I change the focused item via code? #

Absolutely! Most UI frameworks that include a RowList component provide dedicated methods or state properties to set the focused item programmatically. The exact implementation varies a bit by framework, but here are common patterns:

• Vanilla JS/Framework-specific methods: Many RowList components have a method like setFocusedItemIndex() (or similar naming) that accepts a 0-based index. For example:

  // Get a reference to your RowList
  const myRowList = document.querySelector('.my-row-list');
  // Set focus to the 3rd item (index 2)
  myRowList.setFocusedItemIndex(2);
  

• State-driven frameworks (React/Vue): If you're using a component that relies on state, you'll typically update a focusedIndex state variable to control focus:

  // React example
  import { useState } from 'react';
  import RowList from './RowList';
  
  function MyComponent() {
    const [focusedIndex, setFocusedIndex] = useState(0);
  
    // Later, trigger focus on the 4th item (index 3)
    const jumpToItem = () => {
      setFocusedIndex(3);
    };
  
    return (
      <>
        <button onClick={jumpToItem}>Focus 4th Item</button>
        <RowList focusedIndex={focusedIndex} items={myItems} />
      </>
    );
  }
  

2. Can I set focus to a non-first item in a single-row RowList? #

Yes, this works exactly like it does for multi-row RowLists! The number of rows doesn’t limit your ability to target a specific item index. You just use the same methods/properties mentioned above to set the index of the item you want to focus.

For example, if your single row has 5 items and you want to focus the 2nd one (index 1):

myRowList.setFocusedItemIndex(1);

A quick gotcha to note: #

Make sure your RowList has fully loaded and rendered all its items before you try to set the focused index. If you call the method too early (before the items are initialized), it might not work as expected. Use lifecycle hooks (like componentDidMount in React, or DOMContentLoaded in vanilla JS) to trigger the focus change once the component is ready.

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