javascript - 语义 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());
    }   
  };