Пользовательский редактор React Data Grid работает с средством выбора даты реакции (Инвариантное нарушение) - PullRequest
Новая
       63

Пользовательский редактор React Data Grid работает с средством выбора даты реакции (Инвариантное нарушение)

0 голосов
/ 07 апреля 2019

Я работаю над пользовательским редактором сетки данных React с помощью команды datepickerПосле выбранной даты происходит нарушение инварианта.

Желаемое поведение

  1. выберите ячейку
  2. выберите дату с помощью мыши или клавиатуры
  3. обновите ячейку с помощьюформат момента ('L')

Текущая проблема

  1. Основная проблема - нарушение инварианта после выбранной даты, могло ли исследование ошибочно вернуть объект или строку, но не знаякак исправить текущий код.
  2. кажется, что фокус - это блокировка на сетке реагирующих данных, есть ли способ сосредоточиться на календаре, который обеспечивает навигацию по клавиатуре после того, как календарь вытолкнут.(автофокус?)
  3. Не работает локализация календаря

Кто-нибудь знает, где я могу настроить этот код и заставить его работать?

Демонстрация: 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 }}
      />
    );
  }
}

Любые комментарии приветствуются.Большое спасибо

...