我正在使用一个单元格渲染器,它有一个 aggrid 列的输入框/文本框。我希望用户在输入框内有粘贴选项,我在 colDef 中为其提供了 editable=true。当用户在框中输入任何内容时工作正常,但如果用户将 (ctrl+v) 值粘贴到输入框中,则不会触发输入元素中的 onInput/onPaste 事件,因此我无法获取正在粘贴的值。
在下面的示例中,onChange 被触发,但没有 onPaste。也尝试过 onInput 和 onBlur。
示例代码:
export default class SampleCellRenderer extends React.Component {
constructor(props) {
super(props);
this.state={value:''}
}
onChangeListener(event) {
this.setState({ value: event.target.value});
}
onPasteListener(event) {
this.setState({ value: event.target.value});
console.log(value)
}
render() {
return (
<input value={this.state.value} onChange={this.onChangeListener.bind(this)} onPaste=
{this.onPasteListener.bind(this)}/>
);
}
}
class GridExample extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ field: 'athlete' },
{ field: 'year' },
{
field: '',
cellRenderer: 'sampleCellRenderer',
editable: true,
},
],
frameworkComponents: {
sampleCellRenderer: sampleCellRenderer,
},
defaultColDef: {
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
},
rowData: null,
};
}
onGridReady = (params) => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const updateData = (data) => {
this.setState({ rowData: data });
};
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => updateData(data));
};
render() {
return (
<div style={{ width: '100%', height: '100%' }}>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
columnDefs={this.state.columnDefs}
frameworkComponents={this.state.frameworkComponents}
defaultColDef={this.state.defaultColDef}
onGridReady={this.onGridReady}
rowData={this.state.rowData}
/>
</div>
</div>
);
}
}