css - 当您将鼠标悬停在日期上时，如何在 react 日历中显示日期的一些内容

Question

我想在 react-calendar 中将鼠标悬停在日期上

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

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

Answer 1

如果我们谈论这个图书馆:https://www.npmjs.com/package/react-calendar ,您可以利用 tileContent 属性。这使您可以将任何您想要的内容注入(inject)到每个图 block 中。您可以注入(inject) opacity 为 0 的 div，它有一个 onMouseEnter 函数，可以在鼠标悬停时执行任何您喜欢的操作。这是一个例子:

<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
    }
  }
/>;