Question

经过一些调查，我认为可能会出现此问题，因为反应数据网格集中在单元格上，即使日历弹出也不会改变。但是，许多示例都将注意力集中在输入上，不确定如何调整代码并使之正确聚焦

目标：使用react data grid自定义编辑器启用语义日历日期选择器的键盘导航

内置演示：日期选择器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());
    }   
  };

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

1 个答案: