React中useRef结合ag-grid创建持久化cellEditor：如何获取编辑行与字段

嘿，这问题其实很好解决——ag-grid在渲染自定义cellEditor的时候，会自动把当前编辑的上下文信息通过props.params传递给你的组件！你之前的代码里没用到这个参数，所以才拿不到行和字段信息。

我来给你修改一下示例代码，展示怎么获取这些关键信息：

import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';

export default forwardRef((props, ref) => { 
  const inputRef = useRef();
  // 从ag-grid传入的props中解构出编辑上下文参数
  const { params } = props;

  // 你可以在这里直接使用params里的核心信息：
  // params.rowData → 当前编辑的整行数据对象
  // params.colDef.field → 当前编辑的字段名
  // params.data → 和rowData等价的当前行数据
  // params.column → 当前列的完整配置项

  useImperativeHandle(ref, () => { 
    return { 
      getValue: () => { 
        return inputRef.current.value; 
      },
      // 按需把编辑上下文暴露给外部组件使用
      getEditingContext: () => {
        return {
          rowData: params.rowData,
          field: params.colDef.field
        };
      }
    }; 
  }); 

  useEffect(() => { 
    setTimeout(() => inputRef.current.focus(), 10) 
  }, []); 

  return (
    <input 
      type="text" 
      ref={inputRef} 
      defaultValue={props.value}
      // 可以做个直观测试：用当前字段名作为输入框提示
      placeholder={`编辑${params.colDef.field}`}
    />
  ); 
});

核心要点说明： #

• params.rowData：直接拿到当前编辑行的所有数据，比如你的行数据是{ id: 2, username: "lisa" }，这个参数就会返回完整的对象。
• params.colDef.field：获取当前编辑列对应的字段名，比如你在ag-grid列配置里写的field: "username"，这里就会拿到"username"。
• 你可以把这些信息存在组件内部的state/ref里做业务处理，也可以通过useImperativeHandle暴露给父组件，方便在外部调用时获取编辑上下文。

这样你就能轻松知道用户正在编辑哪一行、哪个字段啦！

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