语义用户界面日历对反应数据网格自定义编辑器失去焦点？

Question

经过一些调查，我认为问题可能会出现，因为react数据网格的焦点是单元格，即使日历弹出也没有改变。然而，许多示例都在使用focus on input，不确定如何调整代码并使其正确聚焦

目标：使用响应数据网格html" target="_blank">自定义编辑器启用语义日历日期选择器的键盘导航

构建演示：日期选择器的第三列https://codesandbox.io/embed/8l4jkor19

当前行为：

• 双击日期单元格，弹出日历

通缉行为：

• 双击日期单元格弹出日历
• 按在日历日期导航的键盘箭头键，然后按回车键选择

官方示例：第一个输入单元https://arfedulov.github.io/semantic-ui-calendar-react/

如有任何意见，将不胜感激，非常感谢

Answer 1

解决方案是在customEditor中添加事件侦听器，而左侧和右侧仍然可以在日历上导航、设置状态并保持跟踪。

  constructor(props) {
    super(props);
    this.state = { 
      dateEditor: props.value,
      selectedDate: props.value
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown, true);   
  }   
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown, true);   
  }

  handleKeyDown = (e) => {
    if (e.keyCode === 37) {
      // Arrow left subtract one day
      this.setState({ selectedDate: moment(this.state.selectedDate).subtract(1, 'days').format('L')});
    }
    if (e.keyCode === 39) {
      // Arrow right add one day
      this.setState({ selectedDate: moment(this.state.selectedDate).add(1, 'days').format('L')});
    }
    if (e.keyCode === 13) {
      // Enter will commit selected date
      let value = this.state.selectedDate;
      this.setState({ ["dateEditor"]: value }, () => this.props.onCommit());
    }   
  };