0

我们可以通过在其 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;
}

我的反应代码如下

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()))
 }
}
4

1 回答 1

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>
);
于 2020-05-29T04:22:15.150 回答