DatePicker表单material-ui-redux-form + Redux表单-启用文本输入

Question

我正在使用DatePicker作为Redux表单中Field的组件。现在，每次我专注于该字段时，日期选择器都会打开。我无法自行将日期写到键盘输入中（或粘贴）。我想结合两者-使用户能够从键盘粘贴/输入日期或从日期选择器中选择日期...我该如何实现？

import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';

....

<Field
  name="dateOfBirth"
  type="text"
  component={DatePicker}
  fullWidth
  formatDate={formatDate}
/>

Answer 1

1. 在组件的“状态”中创建一个字段。
2. 将value属性插入到<Field>中，等于状态字段的值。还要将DatePicker的值设置为等于此状态字段。
3. 在onChange的{​​{1}}和DatePicker的<Field>中，调用onChange以更新该状态字段的值。
4. 现在setState和DatePicker都将看到状态更改并更新其中的值。

搜索“反应控制输入”以获取更多详细信息。 Here是一个例子。

更新1

我尚未测试以下代码。您可能需要进行更改才能将字符串转换为<Field>，反之亦然。 moment标签也会根据您使用的DatePicker库而变化。但是这段 pseudo 代码应该为您提供有关如何解决该问题的想法。

基本上我有一个DatePicker和一个DatePicker，它们都从组件的状态显示input。并且当其值更改时，dob函数将更新状态值，从而同时更新onSomethingChange和DatePicker。希望这会有所帮助。

input