Reactjs 使用react select作为弹出式自定义单元格编辑器的ag网格中的键盘事件出现问题

我想使用react select作为ag网格的自定义单元编辑器

这是你的电话号码

你可以下载源代码

我已经删除了所有的css，所以它看起来很简单，但它仍然可以

这是我的package.json

{
  "name": "Test",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "react": "16.8.1",
    "react-dom": "16.8.1",
    "react-select": "^2.4.1",
    "react-scripts": "2.1.5",
    "ag-grid-community": "20.1.0",
    "ag-grid-react": "20.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
  },
  "optionalDependencies": {
    "@types/googlemaps": "3.30.16",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.9.1",
    "prettier": "1.16.4"
  },
  "devDependencies": {
    "eslint-config-prettier": "4.0.0",
    "eslint-plugin-prettier": "3.0.1"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

{
“名称”：“测试”，
“版本”：“1.5.0”，
“私人”：没错，
“依赖项”：{
“反应”：“16.8.1”，
“反应dom”：“16.8.1”，
“反应选择”：“^2.4.1”，
“反应脚本”：“2.1.5”，
“ag网格社区”：“20.1.0”，
“ag网格反应”：“20.1.0”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试--env=jsdom”，
“弹出”：“反应脚本弹出”，
“部署”：“npm运行构建”，
“lint:检查”：“eslint。--ext=js，jsx；退出0”，
“lint:fix”：“eslint。--ext=js，jsx--fix；退出0”，
“安装：清理”：“rm-rf node_modules/&&rm-rf package-lock.json&&npm安装&npm启动”
},
“可选依赖项”：{
“@types/googlemaps”：“3.30.16”，
“@types/markerclustererplus”：“2.1.33”，
“ajv”：“6.9.1”，
“更漂亮”：“1.16.4”
},
“依赖性”：{
“eslint config prettier”：“4.0.0”，
“eslint插件更漂亮”：“3.0.1”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie让我警告你，这个解决方案是一种黑客和反模式。正如你所说，react-select使用SyntheticKeyboardEvent，它会一直等到本机事件在DOM树上循环。但是有一种方法可以让你通过修改代码来调用react-select功能，从而允许你访问react的方法从其他组件中选择组件，这就是为什么这是一个反模式解决方案

从colDef中删除
suppressKeyboardEvent

从节点\u modules/react select/src/createable.js复制
createableselect
组件

将这些行添加到复制的组件以通过onRef访问

componentDidMount() {
   this.props.onRef(this)
}
componentWillUnmount() {
   this.props.onRef(undefined)
}


通过在副本中定义这些方法，传递react select的控制方法

focusOption(param) {
   this.select.focusOption(param);
}
selectOption(param) {
   this.select.selectOption(param);
}


然后在渲染组件时添加
onRef={ref=>{this.SelectRef=ref}}

现在，您可以在停止传播之前调用这些函数来模拟控件

this.SelectRef.focusOption('up');
this.SelectRef.focusOption('down');


您可以通过编写这样的方法来访问react select的状态

focusedOption() {
   return this.select.state.focusedOption;
}


参考node_modules/react select/src/select.js第1142行，完成其余的模拟

你能设置StackBlitz吗？@AvinKavish我没有试过，有必要吗？你可以在这里下载我的代码。是的，但是有了本地副本，我们很难进行讨论，而且我必须设置一个开发环境。如果你上传，我会尽我最大的努力。@AvinKavish一直说安装依赖项到最后……这里是在线设置：人们没有是时候自己设置环境了，而且在人们的计算机上下载不受信任的文件通常也不安全。因此，应该在在线编辑器上进行代码设置，以复制示例，然后向其他人征求建议/解决方案，这可能会获得更多的视图和更快的解决方案哇，我从未想过打电话在停止传播之前选择功能，这可能会起作用！肮脏的解决方案，但绝望的时候需要绝望的措施，所以我感谢你！
componentDidMount() {
   this.props.onRef(this)
}
componentWillUnmount() {
   this.props.onRef(undefined)
}

focusOption(param) {
   this.select.focusOption(param);
}
selectOption(param) {
   this.select.selectOption(param);
}

this.SelectRef.focusOption('up');
this.SelectRef.focusOption('down');

focusedOption() {
   return this.select.state.focusedOption;
}