问题标签 [react-datepicker]

背景

我正在开发一个使用 ReactJS 作为渲染库的 Meteor 应用程序。

目前，即使父级正在访问更新的数据并据称将其传递给子级，我也无法在数据更新时重新渲染子级组件。

父组件是一个数据表。子组件是一个点击编辑日期字段。

它（理论上）的工作方式：父组件将日期的现有数据作为道具传递给子组件。子组件获取现有的道具数据，处理它并使用它设置一些状态，然后有 2 个选项：

• 默认值：显示数据
• 如果用户单击数据字段：更改为输入并允许用户选择日期（使用 react-datepicker），更改状态 - 当用户在字段外单击时，触发返回仅显示并将更新的数据从状态保存到数据库

我在表中每行使用两次子组件，每次使用时，它都需要访问数据库中最新的日期数据。因此，如果一个字段中的数据发生更改，则第二个字段应反映该更改。

问题

除非我手动刷新页面并强制子组件使用新数据呈现，否则第二个字段不会反映数据库中的更改。编辑的字段反映了数据的变化，因为它反映了状态中存储的内容。

阅读 React 文档后，我确信问题在于日期作为道具进入，然后作为状态处理 - 并且因为组件不会从道具更改中重新渲染。

我的问题

我该怎么做才能解决这个问题？

我对文档所做的所有阅读都强烈建议远离诸如 forceUpdate() 和 getDerivedStateFromProps() 之类的东西，但结果是我不确定如何让数据以我想要的方式传递。

想法？

我的代码

我已经对代码进行了一些缩写并删除了特定于我的项目的变量名，但如果有帮助的话，我可以提供更多的实际值。我认为我的问题比直接调试更具概念性。

家长

孩子

（如果这段代码/我的解释很粗略，那是因为我仍然是一个相当初学者/低级别的开发人员。我没有接受过正规培训，所以我在开发一个非常困难的应用程序时正在学习工作。作为一个独立开发者。说来话长。请温柔！）

我有一个表单，用户可以在其中提交一些需要的信息

其中一个字段是出生日期

我正在为该特定字段使用react-datepicker包

一段代码如下所示：

6570 = 18*365 是从 18 年转换而来的天数，我知道这不是固定的，因为也有 364 天

这是日期选择器无法选择日期的屏幕截图

https://gyazo.com/4d66a8e59dbca5e79c3af7d6de139d21

任何想法或建议如何实现用户至少 18 岁才能提交表单？

谢谢！

我正在开发一个反应应用程序。我有 3 个 div，每个都有 DatePicker 组件。我想更新选择的日期。当我更改日期时，它会在每个 div 中更新。

这是代码 -

我使用 datepicker 添加项目并且它可以工作，但是当我尝试使用 datepicker 编辑/更新这些项目时，它不起作用！给我很多错误，例如：

• 失败的道具类型：提供给 的道具类型无效selected，string应DatePicker为object

• 组件正在更改要控制的文本类型的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

• 道具类型失败：提供给selected的道具类型无效，预期为。stringCalendar/Month/Week/Dayobject

• 未捕获的类型错误：无法读取未定义的属性“值”

并且输入为空，没有像预期的那样显示今天的日期，例如这里：

这是我的 EditProject 组件：

非常感谢你的帮助！

我有一个带有一堆输入的表单。我可以在 onValidSubmit 函数中看到这些输入的值。这种输入的一个示例如下：

在形式上，我有：

该函数仅记录表单数据：

我想将此输入更改为 react-datepicker 组件 (DatePicker)，但是，在进行必要的更改以使 DatePicker 工作后，onValidSubmit 中的“formData”对象不再包含“myStartDate”的值。我应该怎么做才能完成这项工作？

我的 DatePicker 组件如下所示：（它与 Input 基本相同，但有一些额外的东西）

我知道 DatePicker 使用 moment.js 处理日期，我将相应地处理此更改，但是，正如我之前所说，“myStartDate”不再显示在传递给“onValidSubmit”的“formData”对象中。是什么赋予了？

非常感谢您的帮助！

我使用React-DatePicker包和 momentjs 让用户在输入中选择一个日期，如下所示：

我想显示时间，但不让用户直接从<input>. 我的日期选择器有一个onChange()功能：

有谁知道我如何实现显示时间，但不让用户更改它？

这是我的代码，我不能使用 npm

这是我们渲染它时的样子

我已经尝试了很多 css 文件，cdn 的一切请帮帮我

我正在使用react-datepicker让用户选择一个日期。但是，现在它使用本地时间 (PDT)，但我想对其进行硬编码以使用特定时区 (PST)。

我尝试使用utcOffsetprop 但它似乎没有做任何事情。有谁知道如何做到这一点？

我使用Redux Form和react-datepicker 效果很好，我想根据我的需要让它完美地工作。我需要以本地化格式（比如说 DD/MM/YYYY）显示日期，同时value以静态格式（“YYYY-MM-DD”）保存输入的属性。我可以添加具有这种值格式的隐藏输入，但如果可以使用 datepicker 自定义来避免它，那就太好了！

提前感谢您的建议。

UPD：看一下截图：

1. 这就是它现在的工作方式（此处无需更改）。

2. 并且值与语言环境同步。我想保持语言环境以语言环境格式为用户显示我的日期，并为后端保持格式不变（“YYYY-MM-DD”永远）。

这是codeandbox的链接。

我试图让 SingleDatePicker 上出现清除日期按钮。查看文档我所要做的就是将 showClearDate 属性添加到 SingleDatePicker。这就是我实现它的方式：

如果我删除 showClearDate 属性（当然不显示按钮），Evertying 工作正常，但是当我添加此属性时，我得到一个异常“无法读取未定义的 onClearDateMouseEnter 属性”

以下内容取自 react-dates SingleDatePickerInput.jsx，显示了错误发生的位置。

文档中没有提到必须提供函数 onClearDateMouseEnter 函数或代码中对它的任何其他引用。

我在这里想念什么？