我仍然相当陌生,我正在使用一个简单的create-react-app来显示使用react-calendar-pane(https://github.com/tomkp/react-calendar-pane)的日历。我正在尝试做一些事情,因为当用户在日历中选择一个日期时,该日期显示在日历上方。我的App.js文件中包含以下内容:
import Calendar from 'react-calendar-pane';
import moment, { calendarFormat } from 'moment';
import date from 'react-calendar-pane';
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p> The date you've selected is: this.props.onClick{date}</p>
<Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
</div>
我通过尝试了解react-calendar-pane组件得出了这个结论,但是它无法解决诸如“警告:prop类型失败:prop
onSelect
在Calendar
中标记为必需,但其值这样的错误。是undefined
。在日历中(在App.js:20)
在App中(在index.js:7)”
我觉得我正在以一种稍微错误的方式来处理它,因此,任何建议或解决方案都将不胜感激。谢谢。
最佳答案
由于未定义this.onSelect
,因此您收到提到的错误。 Calendar
需要一个onSelect
道具;这样,当您选择一个日期时,它可以将其传递回onSelect
函数。您尚未编写onSelect
函数的内容,因此它是undefined
。这就是为什么您收到该错误的原因。
因此,要做的第一件事是编写onSelect
函数。每当选择日期时,Calendar
将调用onSelect
函数,并将日期值传回该函数。如果您这样编写onSelect
函数:
onSelect=(e)=>{
console.log(e);
}
并将其传递给
Calendar
,就像您所做的那样,您可以在console
中看到,只要单击日期,该日期就会显示为moment
对象。现在,由于我们必须显示日期,因此可以将其存储在我们的
state
中。我们将其保存为我们的状态,以便每当单击另一个日期时,state
都会更改,并且显示的日期也会更改。因此,创建一个状态对象:
constructor(){
super();
this.state={
selectedDate:moment(),
}
}
我们已经用初始化了
selectedDate
。这样,如果未选择任何日期,它将显示今天的日期。现在我们将
moment()
函数更改为onSelect=(e)=>{
this.setState({selectedDate:e})
}
每当我们单击
onSelect
中的日期时,这会将日期设置为选定的日期。现在要显示日期,您必须更改
Calendar
至
<p> The date you've selected is: this.props.onClick{date}</p>
这将显示
<p> The date you've selected is: {this.state.selectedDate.format('YYYY-MM-DD')} </p>
。 this.date.selectedDate
用于将对象转换为上述特定格式的字符串。现在,最终代码应如下所示
import React from 'react'
import Calendar from 'react-calendar-pane';
import moment, { calendarFormat } from 'moment';
import date from 'react-calendar-pane';
class StackOverflow extends React.Component {
constructor(){
super();
this.state={
selectedDate:moment(),
}
}
onSelect=(e)=>{
this.setState({selectedDate:e})
}
render () {
return(
<div>
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p> The date you've selected is: {this.state.selectedDate.format('YYYY-MM-DD')} </p>
<Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
</div>
</div>
)
}
}
export default StackOverflow;