aggrid 单元格渲染器中的文本框事件不起作用

时间:2021-02-26 11:43:58

标签: ag-grid-react

我正在使用一个单元格渲染器,它有一个 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>
    );
  }
}

0 个答案:

没有答案