как использовать чистый flatpickr в реакции? - PullRequest
Новая
       12

как использовать чистый flatpickr в реакции?

0 голосов
/ 19 декабря 2018

Я новичок в ReactionJS, и я пытаюсь использовать чистый flatpickr (https://flatpickr.js.org, НЕ реагируйте на flatpickr). Ниже приведен мой текущий код.Любая помощь о том, как правильно это реализовать?

import React, { Component } from "react"
import flatpickr from "flatpickr"

export default class Datepicker extends Component<IProps> {

  public render() {
    flatpickr(".datepicker")
    return (
        <div>
           <input type="text" className="datepicker" />
        </div>
    )
  }
}

1 Ответ

0 голосов
/ 19 декабря 2018

flatpickr требует передачи узла или селектора в него.В React для ссылки на DOM мы используем ref

. Для обработки событий и предоставления других опций вы можете использовать второй аргумент для опций.

Вот демоверсия: 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.datePicker = React.createRef();
  }
  onChange(selectedDates, dateStr, instance) {
    console.log(selectedDates);
  }
  componentDidMount() {
    flatpickr(this.datePicker.current, {
      onChange: this.onChange
    });
  }
  render() {
    return(
      <input type="date" ref={this.datePicker} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<div id="root"></div>
...