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

【问题标题】：Can we get all <li> values using React ref on its <ul> parent?我们可以在其 <ul> 父级上使用 React ref 获取所有 <li> 值吗？
【发布时间】：2020-05-29 03:50:53
【问题描述】：

我们可以通过在其 UL 父级上使用 React Refs 来获取所有 li 值吗？像前锋裁判或儿童之类的？？？

我希望使用 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 输入时，我希望执行以下操作。您认为使用状态具有 li 值来实现此过滤器是不可避免的吗？我正在考虑使用状态以外的其他可能性。

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

【问题讨论】：

您能解释一下您要实现的目标吗？使用 React，DOM 是您通常存储在纯 JavaScript 对象中的数据表示。意思是，您很少需要使用您正在执行的功能检查 DOM；该数据已经在您的代码中的其他地方可用。
您能否详细说明您想要实现的目标。可能会帮助您获得更好的解决方案。
@RossAllen Mohit Mutha ...更新了我的问题。
啊哈，我明白了。好吧，让我写一个答案...

标签： reactjs react-ref

【解决方案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>
);

【讨论】：