agGridReact聚焦cellRendererComponent元素

Question

我正在agGridReact上实现键盘导航功能，

我正在使用colDef的cellRendererFramework属性来呈现定制反应组件，如下所示

const columnDefs = [{ headerName: 'Athlete', field: 'athlete', cellRendererFramework: InputRenderer }, ...]

组件看起来像下面的样子，每列都有自己的渲染器组件

class InputRenderer extends React.Component { 
render() { 
<input value={this.props.value} />
}
}

Grid looks like 
<AgGridReact> 
  columnDefs={this.state.columnDefs}
  singleClickEdit={true}
  onGridReady={onGridReady}
  rowData={this.state.rowData}
suppressCellSelection={true}
</AgGridReact>

我只需要导航到这些可制表的元素，即当我按Tab时从输入显示第1列的值开始，它应该聚焦到第1列的cellRendererComponent的输入字段，此处有点丢失。 在ag-grid网站（https://www.ag-grid.com/javascript-grid-cell-editing/）上有一些示例，但是它们没有使用自定义react组件，而是在其示例上导航，但是使用了内置的编辑器字段，将editable属性设置为true的列，而是使用了自定义react组件

下面是我得到的结果，焦点既不在按钮上也不在输入上，我正在寻找的是当我将焦点放在下一列的按钮上时，在该按钮上按Tab键应该将焦点移到它旁边的输入字段，依此类推。

Answer 1

添加一个componentdidmount（），并在其中使用ref添加显式焦点。对我有用