我仍然相当陌生,我正在使用一个简单的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 onSelectCalendar中标记为必需,但其值这样的错误。是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;

09-11 18:16
查看更多