Javascript 获取React中具有特定类名的所有元素

我想从这个组件中获取所有选择了类名

的元素

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


函数选择器元素（）{
常量listItems=elementObjects.map（（对象）=>
);
返回(

{listItems}

获取元素
);
}

在纯js中，我可以使用
document.getElementsByClassName（'selected'）
获取所有元素

我读过一些应该使用的东西
要访问虚拟dom中的元素，这是否正确？我如何才能做到这一点？
您可能应该从不同的角度来看待它。您可以将您的状态提升一级到
组件

这是react针对类似问题鼓励的做法

函数选择器元素（）{
const[selectedItems，setSelectedItems]=useState（[]）；
常量handleItemSelect=项目=>{
设置selectedItems（[…selectedItems，item]）；
}
const handleItemUnselect=项目=>{
设置selectedItems（selectedItems.filter（i=>i！==item））；
}
常量listItems=elementObjects.map（（对象）=>
handleItemSelect（对象）}
ONONSELECT={（）=>handleItemUnselect（对象）}
/>
);
返回(

{listItems}

console.log（selectedItems）}>get元素
);
}

但是，如果您无法使用ONLY和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>
   );
}

函数选择器元素（）{
const myRef=useRef（）；
常量listItems=elementObjects.map（（对象）=>
);
返回(

{listItems}

{
console.log（ref.current.querySelector（'.selected'）；
}}>
获取元素
);
}
我认为您可以使用document.querySelectorAll（“.list item”），但您需要首先分配一个类名。示例我的类是
列表项
，因此您可以获取DOM元素

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