如何将 react flatpickr 放置在容器而不是主体内答案

【问题标题】：How to position the react flatpickr inside a container instead of body如何将 react flatpickr 放置在容器而不是主体内
【发布时间】：2020-06-03 08:25:30
【问题描述】：

我有一个用例，我必须将 react flatpickr 放置在输入元素的左侧或右侧，而不是上方或下方。

在使用 flatpickr 时，我注意到 flatpickr 被添加到 dom 的主体中。相反，我想将它添加到容器 div 中。所以我将 appendTo 选项与容器 HTMLElement 作为值一起传递。但它没有按预期工作，仍然附加到正文标签。*

这是我使用的代码 sn-p。

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

const DateFilter = props => {
    const {setDateTime} = props;
    const containerRef = useRef() ;
    const container = containerRef.current;

    return (
        <div ref={containerRef}>
            <Flatpickr
                appendTo={container}
                onChange={date => setDateTime(date)}
                enableTime={false}
                dateFormat={"Y-m-d"}
            />
        </div>
    )
}

export default DateFilter;

日历仍会添加到正文中。

Contianer DOM post page load

显然我做错了什么。任何帮助深表感谢。提前致谢。

【问题讨论】：

标签： reactjs datepicker flatpickr

【解决方案1】：

我发现为什么它没有通过检查 1. React flatpicker Index.js 2. 核心 flatpicker.js 文件

react-flatpickr 中没有收到选项 (appendTo)，因为它应该在对象内部传递，而不是作为直接值。

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

const DateFilter = props => {
const {setDateTime} = props;
const containerRef = useRef() ;
const container = containerRef.current;

const getOptions = () => {
     return {
        appendTo : container,
        enableTime : false,
        dateFormat : "Y-m-d"
    }
}

return (
    <div ref={containerRef}>
        <Flatpickr
            onChange={date => setDateTime(date)}
            options={getOptions()}
        />
    </div>
)
}

export default DateFilter;

还要确保在第一次渲染时传递正确的 HTMLElement。否则，如果你通过 undefined 它仍然会在 Body 中加载它。

【讨论】：