在 React 中获取具有特定类名的所有元素答案

【问题标题】：get all elements with specific Classname in React在 React 中获取具有特定类名的所有元素
【发布时间】：2021-07-25 17:35:42
【问题描述】：

我想从这个组件中获取类名selected的所有元素

function ChooseElements() {
 
  const listItems = elementObjects.map((object) =>
  
    <ListItem key={object.id.toString()} value={object.Element} />
  );
  return (
    <div>   <ul>
      {listItems}
    </ul>

    <button onClick={ console.log("get all list items")}>get Elements</button>
    </div>
 
  );
}

在普通的 js 中，我可以使用 document.getElementsByClassName('selected') 来获取所有元素

我在某处读到应该使用useRef 访问虚拟 dom 中的元素，这是正确的吗？我该怎么做？

【问题讨论】：

标签： javascript reactjs dom-manipulation

【解决方案1】：

您可能应该从不同的角度来看待它。您可以将您的状态提升一级到您的 <ChooseElements /> 组件。

这是对类似问题做出反应所鼓励的做法。 here

function ChooseElements() {
   const [selectedItems, setSelectedItems] = useState([]);

   const handleItemSelect = item => {
      setSelectedItems([...selectedItems, item]);
   }

   const handleItemUnselect = item => {
      setSelectedItems(selectedItems.filter(i => i !== item));
   }

   const listItems = elementObjects.map((object) =>
     <ListItem
        key={object.id.toString()}
        value={object.Element}
        onSelect={() => handleItemSelect(object)}
        onUnselect={() => handleItemUnselect(object)}
        />
   );

   return (
      <div>
         <ul>
           {listItems}
         </ul>
         <button onClick={() => console.log(selectedItems)}>get Elements</button>
      </div>
   );
}

但是，如果您无法 ONLY AND ONLY 提升状态，您可以像这样使用 ref：

function ChooseElements() {
   const myRef = useRef();

   const listItems = elementObjects.map((object) =>
     <ListItem
        key={object.id.toString()}
        value={object.Element}
        />
   );

   return (
      <div>
         <ul ref={myRef}>
           {listItems}
         </ul>
         <button onClick={() => {
            console.log(ref.current.querySelector('.selected'));
         }}>
            get Elements
         </button>
      </div>
   );
}

【讨论】：

【解决方案2】：

我认为您可以使用 document.querySelectorAll('.list-item') 但您需要先分配一个类名。例如我的班级是list-item，所以你可以获得DOM元素。

【讨论】：