Реагирует на работу с пользовательским редактором сетки данных с помощью семантического пользовательского интерфейса выбора календаря (dateinput)

Question

Я пытался реализовать пользовательский редактор для строки в моей сетке реагирующих данных, которую я хотел бы разрешить пользователю вводить из календаря вместо того, чтобы печатать.Я придумал что-то, что продолжает возвращать недействительные даты.

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import {
  Icon,
  Menu,
  Checkbox,
  Grid,
  Dropdown,
  Rail,
  Segment,
  MenuHeader,
  Responsive
} from "semantic-ui-react";
import ReactDataGrid from "react-data-grid";
import autoBind from "react-autobind";
import { Editors, Formatters, Data, Filters } from "react-data-grid-addons";
import { connect } from "react-redux";
import moment from "moment";
import DateEditor from "./DateEditor";

import "./styles.css";

const columns = [
  { key: "id", name: "ID" },
  { key: "title", name: "Title" },
  { key: "date", name: "Date", editor: DateEditor }
];

const rows = [
  { id: 0, title: "Task 1", issueType: "Bug", labelColour: "#1D1D1F" },
  { id: 1, title: "Task 2", issueType: "Story", labelColour: "#1D1D1F" },
  { id: 2, title: "Task 3", issueType: "Epic", labelColour: "1D1D1F" }
];

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  render() {
    return (
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => this.state.rows[i]}
          rowsCount={3}
          onGridRowsUpdated={this.onGridRowsUpdated}
          enableCellSelect={true}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

---

DateEditor.js

---

import { DateInput } from "semantic-ui-calendar-react";
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Form } from "semantic-ui-react";
import autoBind from "react-autobind";
import moment, { isMoment } from "moment";

export default class DateEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dateEditor: "" };
    autoBind(this);
    //moment(props.value).format('L')
  }
  getValue() {
    //return { date: moment(this.state.dateEditor).format("L") };
    return { date: this.state.dateEditor };
  }

  getInputNode() {
    return ReactDOM.findDOMNode(this);
  }

  handleChange = (event, { name, value }) => {
    this.setState({ [name]: value }, () => this.props.onCommit());
    //if (this.state.hasOwnProperty(name)) {
    //  this.setState({ [name]: value }, () => this.props.onCommit()); //);
    //}
  };

  render() {
    return (
      <Form>
        <DateInput
          name="dateEditor"
          dateFormat={moment().format("L")}
          placeholder="Date"
          value={this.state.dateEditor}
          //{moment(this.state.date).format('L')}
          iconPosition="left"
          onChange={this.handleChange}
        />
      </Form>
    );
  }
}

---

Если у кого-то есть идеи, у меня также есть свой кусок кодаэкспериментируйте здесь Пользовательский редактор React-Data-Grid в CodeSandBox Некоторые ссылки: Календарь семантического интерфейса пользователя и Пользовательский редактор React-Data-Grid Большое спасибо людямидеи, где я ошибся, очень ценю.

Answer 1

На самом деле, это работает, если вы дважды щелкнете по вводу даты или начнете там печатать, он покажет вам календарь для выбора даты. Проблема связана с сеткой реагирующих данных, и похоже, что по умолчанию используется сетка реагирующих данных. Вы можете увидеть примеры здесь . Эта проблема уже была создана в сетке досягаемости данных github . Надеемся, что эта проблема будет решена.

См. здесь , вы можете легко увидеть, что компонент DateEditor работает хорошо. Я только что показал компонент внизу за компонентом grid-data-grid.

Пока что, я думаю, было бы неплохо избежать grid-реагирующих данных и вместо этого использовать таблицу из семантического-пользовательского реагирования.

Надеюсь, это поможет.