我试图理解我从软件包[https://github.com/Revln9/react-agenda/blob/master/example/src/agenda/agenda.js][1]中找到的这段代码，因为我需要制定一个计划，以便可以将数据发布到特定的几天并将其上传到数据库中并根据用户进行检索
1。我想知道为什么HandleEvent函数（例如HandleItemchange，HandleItemSize，removeEvent，AddnewEvent，changeview等）具有2个参数，但是大多数时候只使用一个参数。
2。另一个问题是changeView函数通过使用传递给天的值来设置numberOfDays，但是当您查看按钮类时，它具有 onClick = {this.changeView.bind（null，7）}>会连续几天传递null，那怎么办？
3。如果我使用此软件包但针对我的学校项目对其进行了修改，是否会窃？在进行其他引导之前，切勿在我自己的项目中实施包。
import React, { Component } from 'react';
import moment from 'moment';
import { ReactAgenda , ReactAgendaCtrl, guid , getUnique , getLast , getFirst , Modal } from 'react-agenda';
var now = new Date();
require('moment/locale/fr.js');
var colors= {
'color-1':"rgba(102, 195, 131 , 1)" ,
"color-2":"rgba(242, 177, 52, 1)" ,
"color-3":"rgba(235, 85, 59, 1)" ,
"color-4":"rgba(70, 159, 213, 1)",
"color-5":"rgba(170, 59, 123, 1)"
}
var items = [
{
_id :guid(),
name : 'Meeting , dev staff!',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0),
classes : 'color-1 color-4'
},
{
_id :guid(),
name : 'Working lunch , Holly',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 11, 0),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 13, 0),
classes : 'color-2'
},
{
_id :guid(),
name : 'Conference , plaza',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 11 , 0),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 14 ,30),
classes : 'color-4'
},
{
_id :'event-4',
name : 'Customers issues review',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+2, 10, 0),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+2, 15, 0),
classes : 'color-3'
},
{
_id :'event-5',
name : 'Group activity',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+3, 10, 0),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+3, 16, 30),
classes : 'color-4'
},
{
_id :'event-6',
name : 'Fun Day !',
startDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+7, 9, 14),
endDateTime : new Date(now.getFullYear(), now.getMonth(), now.getDate()+7, 17),
classes : 'color-3'
}
];
export default class Agenda extends Component {
constructor(props){
super(props);
this.state = {
items:[],
selected:[],
cellHeight:(60 / 4),
showModal:false,
locale:"fr",
rowsPerHour:4,
numberOfDays:4,
startDate: new Date()
}
this.handleRangeSelection = this.handleRangeSelection.bind(this)
this.handleItemEdit = this.handleItemEdit.bind(this)
this.zoomIn = this.zoomIn.bind(this)
this.zoomOut = this.zoomOut.bind(this)
this._openModal = this._openModal.bind(this)
this._closeModal = this._closeModal.bind(this)
this.addNewEvent = this.addNewEvent.bind(this)
this.removeEvent = this.removeEvent.bind(this)
this.editEvent = this.editEvent.bind(this)
this.changeView = this.changeView.bind(this)
this.handleCellSelection = this.handleCellSelection.bind(this)
}
componentDidMount(){
this.setState({items:items})
}
componentWillReceiveProps(next , last){
if(next.items){
this.setState({items:next.items})
}
}
handleItemEdit(item, openModal) {
if(item && openModal === true){
this.setState({selected:[item] })
return this._openModal();
}
}
handleCellSelection(item, openModal) {
if(this.state.selected && this.state.selected[0] === item){
return this._openModal();
}
this.setState({selected:[item] })
}
zoomIn(){
var num = this.state.cellHeight + 15
this.setState({cellHeight:num})
}
zoomOut(){
var num = this.state.cellHeight - 15
this.setState({cellHeight:num})
}
handleDateRangeChange (startDate, endDate) {
this.setState({startDate:startDate })
}
handleRangeSelection (selected) {
this.setState({selected:selected , showCtrl:true})
this._openModal();
}
_openModal(){
this.setState({showModal:true})
}
_closeModal(e){
if(e){
e.stopPropagation();
e.preventDefault();
}
this.setState({showModal:false})
}
handleItemChange(items , item){
this.setState({items:items})
}
handleItemSize(items , item){
this.setState({items:items})
}
removeEvent(items , item){
this.setState({ items:items});
}
addNewEvent (items , newItems){
this.setState({showModal:false ,selected:[] , items:items});
this._closeModal();
}
editEvent (items , item){
this.setState({showModal:false ,selected:[] , items:items});
this._closeModal();
}
changeView (days , event ){
this.setState({numberOfDays:days})
}
render() {
var AgendaItem = function(props){
console.log( ' item component props' , props)
return <div style={{display:'block', position:'absolute' , background:'#FFF'}}>{props.item.name} <button onClick={()=> props.edit(props.item)}>Edit </button></div>
}
return (
<div className="content-expanded ">
<div className="control-buttons">
<button className="button-control" onClick={this.zoomIn}> <i className="zoom-plus-icon"></i> </button>
<button className="button-control" onClick={this.zoomOut}> <i className="zoom-minus-icon"></i> </button>
<button className="button-control" onClick={this._openModal}> <i className="schedule-icon"></i> </button>
<button className="button-control" onClick={this.changeView.bind(null , 7)}> {moment.duration(7, "days").humanize()} </button>
<button className="button-control" onClick={this.changeView.bind(null , 4)}> {moment.duration(4, "days").humanize()} </button>
<button className="button-control" onClick={this.changeView.bind(null , 3)}> {moment.duration(3, "days").humanize()} </button>
<button className="button-control" onClick={this.changeView.bind(null , 1)}> {moment.duration(1, "day").humanize()} </button>
</div>
<ReactAgenda
minDate={new Date(now.getFullYear(), now.getMonth()-3)}
maxDate={new Date(now.getFullYear(), now.getMonth()+3)}
startDate={this.state.startDate}
startAtTime={10}
cellHeight={this.state.cellHeight}
locale="fr"
items={this.state.items}
numberOfDays={this.state.numberOfDays}
headFormat={"ddd DD MMM"}
rowsPerHour={this.state.rowsPerHour}
itemColors={colors}
//itemComponent={AgendaItem}
view="calendar"
autoScale={false}
fixedHeader={true}
onRangeSelection={this.handleRangeSelection.bind(this)}
onChangeEvent={this.handleItemChange.bind(this)}
onChangeDuration={this.handleItemSize.bind(this)}
onItemEdit={this.handleItemEdit.bind(this)}
onCellSelect={this.handleCellSelection.bind(this)}
onItemRemove={this.removeEvent.bind(this)}
onDateRangeChange={this.handleDateRangeChange.bind(this)} />
{
this.state.showModal? <Modal clickOutside={this._closeModal} >
<div className="modal-content">
<ReactAgendaCtrl items={this.state.items} itemColors={colors} selectedCells={this.state.selected} Addnew={this.addNewEvent} edit={this.editEvent} />
</div>
</Modal>:''
}
</div>
);
}
}
答案 0 :(得分：0)
尽管所有这些问题都是基于观点的，但我会尽力为您提供一些指导。
bind函数中上下文的参数。因此，基本上他只是以7天为参数来调用此func。有关其他说明，您可以检查this answer 答案 1 :(得分：0)
1。。您可以根据需要定义任意数量的参数，但是当您不给它们提供值时，它们是未定义的（See here）。为什么他们在这里使用此功能可能有很多原因，但我看不出任何正确的答案。
2。 .bind的定义如下：.bind(thisArg[, arg1[, arg2[, ...]]])到此行将函数绑定为null，并给出7天的参数。
3。。通常不会，但是请确保在项目中查找许可证。在您的情况下，许可证是这样的：
MIT许可证（MIT）
版权（c）2016
特此授予获得以下内容的任何人免费的许可 该软件和相关文档文件（ “软件”），无限制地处理软件，包括 但不限于使用，复制，修改，合并，发布， 分发，再许可和/或出售本软件的副本，并 允许提供软件的人员这样做，但须遵守 以下条件：
以上版权声明和本许可声明应为 包含在该软件的所有副本或主要部分中。
该软件按“原样”提供，没有任何形式的保证， 明示或暗示，包括但不限于以下保证 适销性，特定目的的适用性和非侵权性。 在任何情况下，作者或版权持有人均不承担任何责任 无论是在合同诉讼中的索赔，损害或其他责任， 侵权行为或其他原因，由于侵权行为或与侵权行为有关 软件或软件中的使用或其他处理。
找到了here。绝对可以在您的项目中提及该项目。