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

Question

经过一些调查后，我认为问题可能会发生，因为反应数据网格集中在单元格上，即使日历弹出也没有改变。但是，许多示例都使用了对输入的关注，不确定如何调整代码并使其正确聚焦

目标：为语义日历日期选择器启用键盘导航，使用反应数据网格自定义编辑器

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

目前的行为：

• 双击日期单元格弹出日历
• 按键盘箭头键并更改所选单元格，日历消失

通缉行为：

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

官方例子：第一个输入细胞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());
    }   
  };