即使在单个单元格上，React ag网格也会触发双击

Question

以下内容允许我默认聚焦第一个可用单元格：

  useEffect(() => {
    if (
      editMode &&
      gridRef.current?.api &&
      ppsColumns &&
      ppsColumns.length > 0 &&
      lastSelected === undefined
    ) {
      const value = ppsColumns[0].field;

      gridRef.current.api.setFocusedCell(0, value);
    }
  }, [editMode, gridRef.current]);

但是，我想触发双击事件，而不是设置焦点状态，使用户能够立即编辑单元格。有某种 api 可以做到这一点吗？

Answer 1

您可以修改 useEffect 以在满足条件时开始编辑第一个单元格：

useEffect(() => {
  if (
    editMode &&
    gridRef.current?.api &&
    ppsColumns &&
    ppsColumns.length > 0 &&
    lastSelected === undefined
  ) {
    const firstColumnField = ppsColumns[0].field;

    // Focusing the cell is still necessary before starting to edit
    gridRef.current.api.setFocusedCell(0, firstColumnField);

    // Now, start editing the focused cell
    gridRef.current.api.startEditingCell({
      rowIndex: 0,
      colKey: firstColumnField,
      // Optional parameters for editing, like keyPress and charPress, can be added here
    });
  }
}, [editMode, gridRef.current, ppsColumns, lastSelected]);

Answer 2

我使用 setTimeout 来解决计时问题，尝试调整延迟持续时间（示例中为 100 毫秒）

 useEffect(() => {
  const startEdit = () => {
    if (
      editMode &&
      gridRef.current?.api &&
      ppsColumns &&
      ppsColumns.length > 0 &&
      lastSelected === undefined
    ) {
      const firstColumnField = ppsColumns[0].field;

      gridRef.current.api.setFocusedCell(0, firstColumnField);

      setTimeout(() => {
        gridRef.current.api.startEditingCell({
          rowIndex: 0,
          colKey: firstColumnField,
        });
      }, 100); // delay in ms, adjust as necessary
    }
  };

  startEdit();
}, [editMode, gridRef.current, ppsColumns, lastSelected]);