Можем ли мы получить все <li>значений, используя React ref на его родительском элементе <ul>?

Question

Можем ли мы получить все значения li, используя React Refs на его родительском элементе UL? например, прямые ссылки или дочерние элементы типа ???

Я ожидаю сделать следующее, используя React Ref.

---

let listItem = getElementsByTagName('li');

let anchor;

let listAnchorVal;

for(let i = 0; i < listItem.length; i++){
   anchor = listItem[i].getElementsByTagName("a")[0];
   listAnchorVal= anchor.textContent || anchor.innerText;
}

---

Мой код React ниже

const listItems = React.createRef();

const handleKeyUp = () => {
     console.log(listItems.current.value) :(
};

return (
    <div>
        <input type="text" className="list-filter-input" onKeyUp={handleKeyUp} placeholder="Search names...." />
         <span style={{position:"absolute", right:"925px", marginTop:"1.5%"}}><i className="fa fa-fw fa-search"></i></span>
            <ul className="list-filter-ul" ref={listItems}>
                <li><a href="#">Deepak</a></li>
                <li><a href="#">Mytidbit</a></li>
                <li><a href="#">Hello</a></li>
                <li><a href="#">World</a></li>
                <li><a href="#">Chris</a></li>
                <li><a href="#">Bestie</a></li>
                <li><a href="#">Sugar</a></li>
            </ul>
    </div>

Это фильтр списка, который я пытаюсь реализовать.

onKeyUp при вводе, я хочу sh сделать следующее. Считаете ли вы, что использование состояния для значений li для достижения этого фильтра неизбежно? Я думаю о других возможностях, кроме использования состояния.

     onKeyUp(e){         
      listItemValues.filter(val=>{
return val.toLowerCase().includes(e.target.value.toLowerCase()))
 }
}

Answer 1

Ключевой концепцией при использовании React, Vue или аналогичной структуры является то, что ваш пользовательский интерфейс всегда должен быть представлением ваших данных; ваш пользовательский интерфейс не хранит никакой дополнительной информации. В вашем случае вы можете вытащить имена в массив:

// The value in the input is state, it needs to be stored as it changes.
const [searchValue, setSearchValue] = useState("");

// The names to render are data, they are stored in a plain old array.
const names = [
    "Deepak",
    "Mytidbit",
    "Hello",
    "World",
    "Chris",
    "Bestie",
    "Sugar",
];

// The filtered list is derivable from state + data, it doesn't need
// to be stored separately
const filteredNames = names.filter(val => 
    val.toLowerCase().includes(searchValue.toLowerCase())
);

const handleKeyUp = (event) => {
    setSearchValue(event.target.value);
};

return (
    <div>
        <input type="text" className="list-filter-input" onKeyUp={handleKeyUp} placeholder="Search names...." value={searchValue} />
         <span style={{position:"absolute", right:"925px", marginTop:"1.5%"}}><i className="fa fa-fw fa-search"></i></span>
            <ul className="list-filter-ul">
                {filteredNames.map(name => (
                    <li key={name}><a href="#">{name}</a></li>
                ))}
            </ul>
    </div>
);