reactjs - 通过包装组件控制 Flatpickr 日历视图的打开/关闭

Question

我不想为 Flatpickr 提供意见。相反，它应该通过单击 div 来触发，然后显示日历视图。

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';

export default class CustomDatePicker extends Component {
    constructor(props) {
        super(props);
        this.baseOptions = {
            allowInput: false,
            dateFormat: 'Z',
            altInput: true,
            wrap: true,
            ...this.props.options
        };
        this.state = { isOpen: false };
    }

    onOpenToggle = () => this.setState({ isOpen: !this.state.isOpen });

    componentDidMount() {
        document.addEventListener('click', this.handleClick, false);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClick, false);
    }

    handleClick = event => {
        if (this.node && this.node.contains(event.target)) {
            return;
        }

        this.setState({ isOpen: false });
    };

    render() {
        const { selectedDate, label, onChange } = this.props;
        const { isOpen } = this.state;
        return (
            <div
                className="custom-date-picker"
                onClick={this.onOpenToggle}
                ref={node => (this.node = node)}
            >
                <div className="custom-date-picker-icon">
                    <i className="fa fa-calendar" />
                </div>
                <div className="custom-date-picker-select">
                    {selectedDate ? <div>{selectedDate}</div> : <div>{label}</div>}
                </div>
                <div className="custom-date-picker-arrow">
                    {isOpen ? (
                        <i className="fa fa-chevron-up" />
                    ) : (
                        <i className="fa fa-chevron-down" />
                    )}
                </div>

                {isOpen && (
                    <div className="custom-date-picker-panel">
                        {/* <Flatpickr
                            value={selectedDate}
                            options={this.baseOptions}
                            onChange={(_, dateStr) => onChange(dateStr)}
                        /> */}
                    </div>
                )}
            </div>
        );
    }
}

基本上我需要使用 className custom-date-picker-panel 和 onChange 在 div 中显示日历视图，我通过一个函数来更新 div 的能力

你能告诉我如何实现吗？

Answer 1

react-flatpickr没有那个内置的。但是您可以使用 pureflatpickr来实现此功能。

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(
      <div style={{ border: "1px solid black", height: 100, width: 100}} 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>