模拟鼠标点击reactjs答案

【问题标题】：Simulate mouse click reactjs模拟鼠标点击reactjs
【发布时间】：2022-11-18 05:34:54
【问题描述】：

我有一个应该发生点击的项目（点击折叠列表项中的第一个），但它应该自动发生而无需用户将鼠标放在它上面（光标）并点击它。

该列表项折叠来自材料 ui。

任何想法表示赞赏。

我要尝试的代码： https://codesandbox.io/s/material-ui-nested-list-forked-o6e95s

import React, { useState } from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";

const NestedItem = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleIsOpen = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <List>
      <ListItem button onClick={handleIsOpen}>
        <ListItemText primary={children} />
      </ListItem>
      <Collapse in={isOpen}>
        <List>
          <ListItem button>
            <ListItemText primary="Someshit inside Collapse" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
};

export default NestedItem;

当用户打开页面时，应该点击它（'Someshit inside Collapse'），并且只需一次，它就可以打印 console.log（'text Someshit inside Collapse is clicked'）：

【问题讨论】：

标签： javascript html reactjs arrays material-ui

【解决方案1】：

给你想点击的元素添加一个ID，然后你可以做类似的事情

document.getElementById("elementYouWantToClick").click();

【讨论】：

如果列表项来自 api，则无法为其添加 ID
您要单击第一个项目吗？如果是这样，您可以使用 ListItem 的索引
是的第一个要点击的项目，如果有一个项目点击第一个，就是这样

【解决方案2】：

这个答案可能就是你要找的： Simulate click event on react element

tldr：你不能只在元素上触发 .click()，你必须模拟 mousedown 和 mouseup 事件。

【讨论】：