我正在使用Reactjs和Flux开发一个调度应用程序。在该应用程序中，用户将需要能够选择特定的班次，然后分配一名雇员来承担该班次。单击单独列表中的员工姓名将进行员工分配。
组件结构如下：
通过单击选择一个班次后，（在任何给定的日期中有2-5个班次）我希望能够单击一个雇员列表项，并为其分配其employeeName属性值（this.props.employeeName）到选定的Shift的shiftAssignee属性（this.props.shiftAssignee）。
日历和员工的数据都在应用程序启动时生成，并作为单独的对象分别存储为“日历”和“员工”在本地存储中。最终，我希望将这些数据作为流量数据流的一部分进行更新，以便我可以保留它，而不是在每次启动应用程序时都重新生成它，从而清除所有先前的数据，但这并不是我最紧迫的关注。
该数据的基本结构看起来大致如下：
日历：
{
"MonthName": "May",
"Days": [
{
"DayDate": 1,
"DayName": "Friday",
"Shifts": [
{
"shiftName": "Day Shift",
"required": true,
"shiftAssignee": "",
"shiftLength": 12
}
//remaining shifts
],
}
//remaining days
]
}
雇员：
[
{
"name": "F. Last",
"totalHours": 32,
"availableHours": 32,
"assignments": [],
"commitment": 0.8
}
//remaining employees
]
我不知道这是否比需要的信息更多，或者我是否正在忽略一些对考虑至关重要的内容。如果需要更多信息，请告诉我。
我认为您不必担心两个子组件之间的关系。
在flux应用程序中，数据流入最顶层的组件，然后向下传递给子组件。从这种角度来看，我相信您的问题可以改写为：“我如何获得一个子组件来更改助焊剂存储中的数据？”
我在Codepen中写了一个非常粗糙的示例：http ://codepen.io/jhubert/pen/ZGJEdp
这是一个内置的流量存储/调度程序的非常轻量级的概念版本。我不建议复制该示例；这是我们追求的概念。
本质上，您希望您的员工列表项组件修改数据，然后让自然的级联数据流从那里开始工作。
# not real code. kind of like coffeescript but really not real.
_data = { { { shiftAssignee: '' } } }
ScheduleAppComponent.setState = _data
EmployeeListItem.onClick = setShiftAssigneeOnData()
ScheduleAppComponent.setState = _data
在“结构和数据流”下的磁通概述中，大部分内容已对此进行了较高的介绍。
希望对您有所帮助！祝你好运！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句