javascript - 反应 App.js 和类之间的连接信息
问题描述
我正在尝试将React Scheduler集成到我使用 JSON 数据库的应用程序中。如何将 App.js 中定义的将数据更新到 DataSheet.js 并使用它们而不是默认值的班次和函数传递?是否有更好的方法可以从 DataSheet 启用数据库更新?
应用程序.js:
import React from 'react';
import Header from "./components/Header";
import { useState, useEffect } from "react"
import AddShift from './components/AddShift';
import Shifts from './components/Shifts';
import Week from './components/Week'
import DataSheet from './components/DataSheet';
const containerStyle= {
width: '100vw',
height: '100vh',
}
const App = () => {
const [showAddShfit, setShowAddShift] = useState(false)
const [shifts, setShifts] = useState([])
useEffect(() => {
const getShifts = async () => {
const shiftsFromServer = await fetchShifts()
setShifts(shiftsFromServer)
}
getShifts()
}, [])
const fetchShifts = async () => {
const res = await fetch(`http://localhost:5000/shifts/`)
const data = await res.json()
return data
}
//Add Shift
const addShift = async (shift) => {
const res = await fetch(`http://localhost:5000/shifts/`,{
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(shift)
})
const data = await res.json()
setShifts([...shifts, data])
}
const deleteShift = async (id) => {
await fetch(`http://localhost:5000/shifts/${id}`, {
method: 'DELETE',
})
setShifts(shifts.filter((shift) => shift.id !== id))
}
return (
<div className="container"
style={containerStyle} >
<div className='secondary_container'>
<Header />
<DataSheet shifts={shifts} addShift={addShift}/>
</div>
</div>
);
}
export default App;
数据表.js:
import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
import {
Scheduler,
Appointments,
AppointmentForm,
AppointmentTooltip,
WeekView,
ConfirmationDialog,
} from '@devexpress/dx-react-scheduler-material-ui';
const appointments = [
{
title: "Website Re-Design Plan",
startDate: new Date(2018, 5, 25, 9, 35),
endDate: new Date(2018, 5, 25, 11, 30),
id: 0,
location: "Room 1"
},
];
export default class DataSheet extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: appointments,
currentDate: '2018-06-27',
addedAppointment: {},
appointmentChanges: {},
editingAppointment: undefined,
};
this.commitChanges = this.commitChanges.bind(this);
this.changeAddedAppointment = this.changeAddedAppointment.bind(this);
this.changeAppointmentChanges = this.changeAppointmentChanges.bind(this);
this.changeEditingAppointment = this.changeEditingAppointment.bind(this);
}
changeAddedAppointment(addedAppointment) {
this.setState({ addedAppointment });
}
changeAppointmentChanges(appointmentChanges) {
this.setState({ appointmentChanges });
}
changeEditingAppointment(editingAppointment) {
this.setState({ editingAppointment });
}
commitChanges({ added, changed, deleted }) {
this.setState((state) => {
let { data } = state;
if (added) {
const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
data = [...data, { id: startingAddedId, ...added }];
}
if (changed) {
data = data.map(appointment => (
changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment));
}
if (deleted !== undefined) {
data = data.filter(appointment => appointment.id !== deleted);
}
return { data };
});
}
render() {
const {
currentDate, data, addedAppointment, appointmentChanges, editingAppointment,
} = this.state;
return (
<Paper>
<Scheduler
data={data}
height={660}
>
<ViewState
currentDate={currentDate}
/>
<EditingState
onCommitChanges={this.commitChanges}
addedAppointment={addedAppointment}
onAddedAppointmentChange={this.changeAddedAppointment}
appointmentChanges={appointmentChanges}
onAppointmentChangesChange={this.changeAppointmentChanges}
editingAppointment={editingAppointment}
onEditingAppointmentChange={this.changeEditingAppointment}
/>
<WeekView
startDayHour={9}
endDayHour={17}
/>
<ConfirmationDialog />
<Appointments />
<AppointmentTooltip
showOpenButton
showDeleteButton
/>
<AppointmentForm />
</Scheduler>
</Paper>
);
}
}
解决方案
将数据作为 props 从父组件传递并从子组件App
捕获DataSheet
。
应用程序
...
<DataSheet shifts={shifts} addShift={addShift}/>
...
在Datasheet
组件内部,您可以将它们用作this.props.shifts
和this.props.addShift
。
推荐阅读
- corda - 我们如何在 CordApp 的 Contract-States 库中访问 NetworkMapCache
- github - 如何以编程方式阻止 GitHub PR 合并
- grafana - 使用 kubeflow 的 Grafana
- unity3d - Unity 上的项目路径无效
- c# - ADODB.Command,查找满足条件的行
- javascript - 单击导航栏中的锚链接后平滑滚动到 div 容器(将 div 容器居中在视口/屏幕的中间)
- c - Seg Fault 在指针数组上调用 mergesort
- php - Laravel 7. 如何在laravel中使用外键从各个表中获取记录?
- flutter - 如何在不占用 GridView 任何空间的情况下从 UI 中隐藏小部件
- spring - 缺少 Swagger2 UI 资源映射和 API 文档