获取 ReactJS 返回的数据

Question

它将我在附件中准备的开始和结束日期写在屏幕上console.log；没问题，但我怎样才能通过this.setState 传递这个？

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

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

在代码框上

A this.setstat ({
       date: startViewDateComputed
})

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

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

codesandbox

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>
    );
  }
}

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

  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;
  };