Question

我还是比较新的反应和我使用简单的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组件得出了这个结论，但它根本没有处理错误，例如＆＃34;警告：失败道具类型：道具{{1在onSelect中标记为必需，但其值为Calendar。在日历中（在App.js：20）在App中（在index.js：7）＆＃34;

我觉得我以稍微错误的方式接近它，所以任何建议或解决方案都会受到极大的赞赏。谢谢。

Answer 1

您收到的错误是因为您尚未定义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功能更改为

onSelect=(e)=>{
 this.setState({selectedDate:e})
}

每当我们点击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。 format是将对象转换为所提及的特定格式的字符串。

现在最终的代码看起来应该是这样的

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;

如何使用react-calendar-pane显示日历中的所选日期？

1 个答案: