如何在将鼠标悬停在日期上时显示反应日历中日期的某些内容

Question

我想在react日历中的日期上悬停。

将鼠标悬停在日期上时，如何在react-calendar中显示日期的某些内容

<Calendar
  style={{ height: 500 }}
  onChange={this.onChange}
  value={this.state.date}
/>;

Answer 1

如果我们讨论的是这个库：https://www.npmjs.com/package/react-calendar，那么您可以利用tileContent属性。这使您可以向每个平铺中注入任何您想要的东西。您可以使用opacity 0注入一个具有onMouseEnter函数的div，该函数可以在鼠标悬停时执行您喜欢的任何操作。下面是一个例子：

<Calendar
  style={{ height: 500 }}
  onChange={this.onChange}
  value={this.state.date}
  tileContent={
    ({ activeStartDate, date, view }) => {
      return view === 'month' && date.getDay() === 0 
      ? <p onMouseEnter={
          //do whatever you want
          console.log('hi')
          }>It's Sunday!</p> 
      : null
    }
  }
/>;