我们可以在其 <ul> parent 上使用 React ref 获取所有 <li> 值吗？

Question

我们可以通过在其 UL parent 上使用 React Refs 来获取所有 li 值吗？像前向参考或 children 之类的???

我希望使用 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 输入时，我希望执行以下操作。你觉得用state有li值来实现这个filter是不可避免的吗？我正在考虑使用状态以外的其他可能性。

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

Answer 1

使用 React 或 Vue 或类似框架时的一个关键概念是，您的 UI 应该始终代表您的数据；您的 UI 不存储任何额外信息。在您的情况下，您可以将名称提取到一个数组中：

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

我们可以在其 <ul> parent 上使用 React ref 获取所有 <li> 值吗？

Can we get all <li> values using React ref on its <ul> parent?

reactjs

react-ref