我正在尝试为我的反应数据网格中的一行实现自定义编辑器,希望允许用户从日历中输入而不是键入内容。 我想出了一些会不断返回无效日期的东西。
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 Custom Editor at CodeSandBox 一些参考:Semantic UI Calendar和React-Data-Grid Custom Editor非常感谢别人,我可能做错了一些想法,非常感谢。