React项目中实现Material UI折叠列表项的自动点击需求

核心修改点 #

要实现页面加载时自动点击第一个子项并打印指定日志，需要完成以下几步：

• 组件挂载后自动展开父折叠面板
• 等待折叠面板展开动画完成后，触发第一个子项的点击事件
• 确保自动操作仅执行一次
• 给目标子项添加点击日志打印逻辑

修改后的完整代码 #

import React, { useState, useRef, useEffect } 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 [hasAutoClicked, setHasAutoClicked] = useState(false);
  const firstChildRef = useRef(null);

  const handleIsOpen = () => {
    setIsOpen((prev) => !prev);
  };
  
  const handleChildClick = (el) => {
    if (el === "Someshit inside Collapse") {
      console.log('text Someshit inside Collapse is clicked');
    }
  };

  const data = ["Someshit inside Collapse", "Someshit inside Collapse 2"];

  // 组件挂载时自动展开折叠面板
  useEffect(() => {
    setIsOpen(true);
  }, []);

  return (
    <List>
      <ListItem button onClick={handleIsOpen}>
        <ListItemText primary={children} />
      </ListItem>
      {/* 折叠面板展开动画完成后触发自动点击 */}
      <Collapse 
        in={isOpen} 
        onEntered={() => {
          if (!hasAutoClicked && firstChildRef.current) {
            firstChildRef.current.click();
            setHasAutoClicked(true);
          }
        }}
      >
        {data.map((el, index) => (
          <List key={index}>
            <ListItem 
              button 
              // 给第一个子项添加ref
              ref={index === 0 ? firstChildRef : null}
              onClick={() => handleChildClick(el)}
            >
              <ListItemText primary={el} />
            </ListItem> 
          </List>
        ))}
        <List></List>
      </Collapse>
    </List>
  );
};

export default NestedItem;

关键逻辑说明 #

1. 自动展开折叠面板：通过useEffect在组件挂载时调用setIsOpen(true)，触发折叠面板展开
2. 精准触发子项点击：利用Collapse组件的onEntered回调，确保在折叠面板完全展开（动画结束）后再执行点击，避免DOM未渲染导致的无效操作
3. 防止重复执行：通过hasAutoClicked状态标记，确保自动点击仅执行一次
4. 日志打印逻辑：在子项的点击事件中判断文本内容，匹配目标文本时打印指定日志

内容的提问来源于stack exchange，提问作者walee