如何从组件内触发单元格更改以更新网格数据？（AG 网格 - 反应）

Question

我在 Ag Grid 中有一个下拉组件。但是当我改变这个值时，客户端数据对象并没有改变。

当下拉列表发生变化时，我正在触发组件内的一个函数 - 但我如何才能告诉“父”AG 网格更新它的该单元格的数据？（当您只是直接在单元格中更改文本而不使用自定义组件时，AG Grid 会自动更新它的数据。）

好像和getValue()的使用有关，但是我在文档中好像找不到正确的调用方式。

Answer 1

您是否使用单元格渲染器或单元格编辑器构建下拉组件？

如果使用自定义单元格编辑器，您必须实施 getValue 方法，否则网格不会在编辑完成后将新值插入到行中。

在此处查看此实现：

const CustomCellEditor = forwardRef((props, ref) => {
  const [selectedValue, setSelectedValue] = useState('United States');
  const values = ['United States', 'Russia', 'Canada'];

  /* Component Editor Lifecycle methods */
  useImperativeHandle(ref, () => {
    return {
      getValue() {
        return selectedValue;
      },
    };
  });

  const onChangeHandler = (event) => {
    setSelectedValue(event.target.value);
  };
  return (
    <div>
      <select value={selectedValue} onChange={onChangeHandler}>
        {values.map((item) => (
          <option>{item}</option>
        ))}
      </select>
    </div>
  );
});

Plunkr example

Documentation on Custom Cell Editors

如何从组件内触发单元格更改以更新网格数据？（AG 网格 - 反应）

How to trigger a cell change from within a component to update the grid data? (AG Grid - React)

reactjs

ag-grid-react

如何从组件内触发单元格更改以更新网格数据？ （AG 网格 - 反应）

How to trigger a cell change from within a component to update the grid data? (AG Grid - React)

reactjs

ag-grid-react

如何从组件内触发单元格更改以更新网格数据？（AG 网格 - 反应）