AG Grid React如何从组件内触发单元格变更以更新网格数据

架构老林

2026-9-29

AG Grid自定义下拉编辑组件数据不同步解决方案

AG Grid原生单元格编辑自动同步的逻辑只针对内置编辑器，自定义编辑器需要调用官方暴露的回调触发同步，不需要自行实现getValue相关逻辑。

核心操作步骤

从自定义组件接收到的AG Grid注入的params参数中取出setValue方法，该方法是官方提供的自定义组件同步单元格值的专用接口
在你已实现的下拉菜单值变更回调函数中，调用params.setValue(你的新下拉值)，传入更新后的取值即可触发AG Grid内部数据同步
数据同步完成后可通过params.node.data访问当前行的全量数据，对应字段会自动更新，和原生编辑行为完全一致

代码示例

React 版本

const CustomDropDownEditor = (params) => {
  // 下拉值变更触发函数
  const onSelectChange = (newVal) => {
    // 调用AG Grid提供的同步方法
    params.setValue(newVal);
  };

  return (
    <select 
      defaultValue={params.value} 
      onChange={(e) => onSelectChange(e.target.value)}
    >
      <option value="active">激活</option>
      <option value="inactive">禁用</option>
      <option value="pending">待审核</option>
    </select>
  );
};

Vue3 版本

<template>
  <select 
    :value="params.value" 
    @change="onSelectChange($event.target.value)"
  >
    <option value="active">激活</option>
    <option value="inactive">禁用</option>
    <option value="pending">待审核</option>
  </select>
</template>
<script setup>
const props = defineProps(['params'])
const onSelectChange = (newVal) => {
  props.params.setValue(newVal)
}
</script>