javascript - 获取 ReactJS 返回的数据
问题描述
它写了我在屏幕附件中准备的开始和结束日期console.log
;没问题,但我怎么能通过这个this.setState
?
我想将写入console.log
屏幕的日期传输到this.setState
. 我怎样才能做到这一点?
写入控制台屏幕的日期。我想与setState
在密码箱上
A this.setstat ({
date: startViewDateComputed
})
所以我想传输写入控制台屏幕的数据
或者我如何startViewDateComputed
从这里获取日期?
解决方案
以下是您的解决方案 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;
};
推荐阅读
- xml - 为什么 Dynamics AX 集成框架不接受 xsi:type 属性上的命名空间前缀,我该如何做?
- python - 在具有 Python UCS4 的 Ubuntu 14.04 中创建 Virtualenv
- sql - 在 sqlite 中向该表添加增长列
- ruby-on-rails - 我的服务对象模块中的未定义方法
- apiconnect - IBM APIConnect 是否有 IP 白名单或黑名单?
- java - 失败:org.apache.maven plugins:maven-jar-plugin:2.6:test-jar
- mysql - 获取最新 MySQL 版本的 yum 存储库
- math - 以几何级数移动对象
- python - python-docx:在保持顺序的同时遍历段落、表格和图像
- angular - MatBottomSheet closeOnNavigation 仅适用于浏览器上的后退/前进,但不适用于路由本身