Question

我正在使用带有react datepicker的React数据网格定制编辑器。在选择日期之后，它将发生不变的违反。

期望的行为

选择单元格
通过鼠标或键盘选择日期
使用矩矩格式（'L'）更新单元格

当前问题

主要问题是在选择日期后会始终不变，研究是否可能错误地返回了对象或字符串，却不知道如何修复当前代码。
似乎焦点锁定在react数据网格上，有没有一种方法可以将焦点放在日历上，从而在弹出日历后启用键盘导航。（自动对焦？）
日历本地化不起作用

有人知道我可以在哪里调整此代码并使之工作吗？

演示：https://codesandbox.io/s/6wn4y9z9nk?fontsize=14

自定义编辑器类

import { DateInput } from "semantic-ui-calendar-react";
import React, { Component } from "react";
import ReactDOM from "react-dom";
import moment from "moment/min/moment-with-locales";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default class ReactDatePicker extends React.Component {
  browserLocale = window.navigator.userLanguage || window.navigator.language;
  constructor(props) {
    super(props);
    this.state = { dateEditor: moment() };
    this.handleChange = this.handleChange.bind(this);
    console.log("initial date: " + props.value);
  }

  getValue() {
    console.log("this.state.dateEditor is: " + this.state.dateEditor);
    return { date: this.state.dateEditor };
    //column key: this.state
  }

  getInputNode() {
    console.log(ReactDOM.findDOMNode(this).getElementsByTagName("input")[0]);
    return ReactDOM.findDOMNode(this).getElementsByTagName("input")[0];
  }

  // handle change is not working
  handleChange(date) {
    console.log("date value is: " + date);
    this.setState({ dateEditor: date }, () => this.props.onCommit());
  }

  render() {
    moment.locale(this.browserLocale);
    console.log(moment.locale(this.browserLocale));
    return (
      <DatePicker
        selected={this.state.dateEditor}
        onChange={this.handleChange}
        dateFormat="L"
        autoFocus="true"
        //inputProps={{ autoFocus: true }}
      />
    );
  }
}

任何评论都值得赞赏。非常感谢

React Data Grid定制编辑器与react datepicker配合使用（不变违规）

0 个答案: