到达ReactJS返回的数据

Question

它用console.log将我在附件中准备的开始和结束日期写入屏幕；没问题，但我如何用this.setState通过这个？

我想将写入console.log屏幕的日期转移到this.setState。我该怎么做？

写入控制台屏幕的日期。我想用setState转账

在codesandbox 上

A this.setstat ({
       date: startViewDateComputed
})

所以我想传输写入控制台屏幕的数据

或者我如何从这里获得startViewDateComputed日期？

代码沙箱

Answer 1

以下是您的解决方案demo.js

import * as React from "react";
import Paper from "@material-ui/core/Paper";
import { Plugin, Getter } from "@devexpress/dx-react-core";
import { ViewState } from "@devexpress/dx-react-scheduler";
import {
Scheduler,
WeekView,
Appointments,
Toolbar,
ViewSwitcher,
MonthView,
DayView
} from "@devexpress/dx-react-scheduler-material-ui";
import { appointments } from "../../../demo-data/month-appointments";
const pluginDependencies = [
{ name: "DayView", optional: true },
{ name: "MonthView", optional: true },
{ name: "WeekView", optional: true },
{ name: "ViewState", optional: true }
];
// modified this component to accept startViewDateComputed and endViewDateComputed
const IntegratedDates = ({ startViewDateComputed, endViewDateComputed }) => {
return (
<Plugin dependencies={pluginDependencies} name="IntegratedDates">
<Getter name="startViewDate" computed={startViewDateComputed} />
<Getter name="endViewDate" computed={endViewDateComputed} />
</Plugin>
);
};
export default class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null
};
}
// added this 
shouldComponentUpdate(nextProps, nextState) {
if (
nextState.startDate === this.state.startDate &&
nextState.endDate === this.state.endDate
) {
return false;
}
return nextProps === this.props && nextState === this.state;
}
//moved this inside class
startViewDateComputed = ({ startViewDate }) => {
this.setState(prev => ({ startDate: startViewDate }), ()=> console.log(this.state));
console.log("start view date:", startViewDate);
return startViewDate;
};
//moved this inside class
endViewDateComputed = ({ endViewDate }) => {
this.setState(prev => ({ endDate: endViewDate }), ()=> console.log(this.state));
console.log("end view date:", endViewDate);
return endViewDate;
};
render() {
return (
<Paper>
<Scheduler data={appointments} height={660}>
<ViewState
defaultCurrentDate="2018-07-25"
defaultCurrentViewName="work-week"
/>
<WeekView startDayHour={10} endDayHour={19} />
<WeekView
name="work-week"
displayName="Work Week"
excludedDays={[0, 6]}
startDayHour={9}
endDayHour={19}
/>
<MonthView />
<DayView />
{/* modified to pass props */}
<IntegratedDates
startViewDateComputed={this.startViewDateComputed}
endViewDateComputed={this.endViewDateComputed}
/>
<Toolbar />
<ViewSwitcher />
<Appointments />
</Scheduler>
</Paper>
);
}
}

---这应该会在试图更新render方法中的状态时产生警告，以避免您可以通过以下函数调用来替换更新状态的语句--

onEndDateUpdated = (endDate) =>  {
console.debug ('endDateReceived', endDate);
}
onStartDateUpdated = (startDate) => { 
console.debug('startDate');
}
//moved this inside class
startViewDateComputed = ({ startViewDate }) => {
this.onStartDateUpdated(startViewDate);
console.log("start view date:", startViewDate);
return startViewDate;
};
//moved this inside class
endViewDateComputed = ({ endViewDate }) => {
this.onEndDateUpdated(endViewDate);
console.log("end view date:", endViewDate);
return endViewDate;
};