Question

我想将Pikaday datepicker与ReactJS一起使用。它不是基于ReactJS。我该如何使用它？

Answer 1

要将Pikaday与ReactJS一起使用，您可以像任何其他节点模块一样使用它。诀窍是挂钩到React渲染事件，以便在渲染视图后，Pikaday在您想要使用它的任何渲染DOM输入上初始化。您可以使用ReactJS生命周期事件componentDidRender执行此操作：

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  }

Answer 2

要在React 16.3中使用此功能，我必须更新以下内容。

import React from 'react'
import Pikaday from 'pikaday'

class PikadayWrap extends React.Component {
  constructor (params) {
    super(params)
    this.myRef = React.createRef()
  }

  componentDidMount () {
    new Pikaday({
      field: this.myRef.current,
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    })
  }

  render () {
    return <div>
      <input type='text' ref={this.myRef} />
    </div>
  }
}
export default PikadayWrap

有关详细信息，请参阅此问题。

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

我怎样才能将Pikaday与ReactJS一起使用？

2 个答案: