Editor 自定义编辑器响应数据网格

我在尝试创建自定义自动完成编辑器时遇到了一个奇怪的问题

基本上，我所做的是拉取了内置的AutocompleteEditor类并将其重构为纯ES6，然后将该类重命名为ProductSelectEditor。不修改代码逻辑

当我尝试使用它时，在调用handleChange（）时出现错误“无法读取未定义的属性'onCommit'”：

handleChange() {
  this.props.onCommit(); // props undefined
}

现在，如果我用真正的内置自动完成编辑器替换编辑器，它就可以正常工作了。我看不出任何直接的原因，为什么我的自定义版本不起作用，而我正在做的唯一修改是重构代码，使之远离TypeScript，重命名类，并最终将类导出为默认值？ 有什么我不明白的线索吗

下面是整个重构代码

import React from 'react'
import ReactDOM from 'react-dom'
import ReactAutocomplete from  'ron-react-autocomplete';
import PropTypes from 'prop-types';
import '../css/ron-react-autocomplete.css'
const { shapes: { ExcelColumn } } = require('react-data-grid')

let optionPropType = PropTypes.shape({
  id: PropTypes.required,
  title: PropTypes.string
});

export default class ProductSelectEditor extends React.Component {
  static propTypes = {
    onCommit: PropTypes.func,
    options: PropTypes.arrayOf(optionPropType),
    label: PropTypes.any,
    value: PropTypes.any,
    height: PropTypes.number,
    valueParams: PropTypes.arrayOf(PropTypes.string),
    column: PropTypes.shape(ExcelColumn),
    resultIdentifier: PropTypes.string,
    search: PropTypes.string,
    onKeyDown: PropTypes.func,
    onFocus: PropTypes.func,
    editorDisplayValue: PropTypes.func
  };

  static defaultProps = {
    resultIdentifier: 'id'
  };

  handleChange() {
    this.props.onCommit();
  }

  getValue() {
    let value;
    let updated = {};
    if (this.hasResults() && this.isFocusedOnSuggestion()) {
      value = this.getLabel(this.autoComplete.state.focusedValue);
      if (this.props.valueParams) {
        value = this.constuctValueFromParams(this.autoComplete.state.focusedValue, this.props.valueParams);
      }
    } else {
      value = this.autoComplete.state.searchTerm;
    }
    updated[this.props.column.key] = value;
    return updated;
  }

  getEditorDisplayValue() {
    let displayValue = {title: ''};
    let { column, value, editorDisplayValue } = this.props;
    if (editorDisplayValue && typeof editorDisplayValue === 'function') {
      displayValue.title = editorDisplayValue(column, value);
    } else {
      displayValue.title = value;
    }
    return displayValue;
  }

  getInputNode() {
    return ReactDOM.findDOMNode(this).getElementsByTagName('input')[0];
  }

  getLabel(item) {
    let label = this.props.label != null ? this.props.label : 'title';
    if (typeof label === 'function') {
      return label(item);
    } else if (typeof label === 'string') {
      return item[label];
    }
  }

  hasResults() {
    return this.autoComplete.state.results.length > 0;
  }

  isFocusedOnSuggestion() {
    let autoComplete = this.autoComplete;
    return autoComplete.state.focusedValue != null;
  }

  constuctValueFromParams(obj, props) {
    if (!props) {
      return '';
    }
    let ret = [];
    for (let i = 0, ii = props.length; i < ii; i++) {
      ret.push(obj[props[i]]);
    }
    return ret.join('|');
  }

  render() {
    let label = this.props.label != null ? this.props.label : 'title';
    return (<div height={this.props.height} onKeyDown={this.props.onKeyDown}>
      <ReactAutocomplete search={this.props.search} ref={(node) => this.autoComplete = node} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} />
      </div>);
  }
}

从“React”导入React
从“react dom”导入react dom
从“ron react autocomplete”导入ReactAutocomplete；
从“道具类型”导入道具类型；
导入“../css/ron react autocomplete.css”
const{shapes:{ExcelColumn}}=require（'react-data-grid'））
让optionPropType=PropTypes.shape({
id:PropTypes.required，
标题：PropTypes.string
});
导出默认类ProductSelectEditor扩展React.Component{
静态类型={
onCommit:PropTypes.func，
选项：PropTypes.arrayOf（optionPropType），
标签：PropTypes.any，
值：PropTypes.any，
高度：PropTypes.number，
valueParams:PropTypes.arrayOf（PropTypes.string），
列：PropTypes.shape（ExcelColumn），
结果标识符：PropTypes.string，
搜索：PropTypes.string，
onKeyDown:PropTypes.func，
onFocus:PropTypes.func，
editorDisplayValue:PropTypes.func
};
静态defaultProps={
结果标识符：“id”
};
handleChange（）{
this.props.onCommit（）；
}
getValue（）{
让价值；
让更新={}；
if（this.hasResults（）&&this.isFocusedOnSuggestion（））{
value=this.getLabel（this.autoComplete.state.focusedValue）；
if（this.props.valueParams）{
value=this.constructValueFromParams（this.autoComplete.state.focusedValue，this.props.valueParams）；
}
}否则{
值=this.autoComplete.state.searchTerm；
}
更新的[this.props.column.key]=值；
更新的回报；
}
getEditorDisplayValue（）{
让displayValue={title:''}；
让{column，value，editorDisplayValue}=this.props；
if（editorDisplayValue&&typeof editorDisplayValue==='function'）{
displayValue.title=editorDisplayValue（列，值）；
}否则{
displayValue.title=值；
}
返回显示值；
}
getInputNode（）{
返回ReactDOM.findDOMNode（this.getElementsByTagName（'input'）[0]；
}
getLabel（项目）{
让label=this.props.label！=null？this.props.label:'title'；
如果（标签类型==='function'）{
退货标签（项目）；
}else if（标签类型==='string'）{
退货项目[标签]；
}
}
hasResults（）{
返回this.autoComplete.state.results.length>0；
}
isFocusedOnSuggestion（）{
设autoComplete=this.autoComplete；
返回autoComplete.state.focusedValue！=null；
}
constructValueFromParams（对象、道具）{
如果（！道具）{
返回“”；
}
设ret=[]；
for（设i=0，ii=props.length；i
);
}
}

好吧，经过几个小时的戳破和撕碎，我们发现了道具未定义的原因。显然，在剥离类型脚本之后，我需要重新绑定“this”以获得正确的上下文：

<ReactAutocomplete ... onChange={this.handleChange.bind(this)} ... />