Форма DatePicker material-ui-redux-form + Redux Form - включить ввод текста - PullRequest
Новая
       53

Форма DatePicker material-ui-redux-form + Redux Form - включить ввод текста

0 голосов
/ 04 июля 2018

Я использую DatePicker в качестве компонента моего поля из избыточной формы. Прямо сейчас каждый раз, когда я фокусируюсь на поле, открывается окно выбора даты. Я не могу написать дату для ввода из keyboadrd самостоятельно (или вставить ее). Я хотел бы объединить оба - позволить пользователю вставлять / вводить дату с клавиатуры или выбирать ее из средства выбора даты ... Как я могу добиться этого? 

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

.... 

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

1 Ответ

0 голосов
/ 04 июля 2018
  1. Создайте поле в состоянии вашего компонента.
  2. Вставьте атрибут value в ваш <Field>, равный значению поля состояния. Также установите значение вашего DatePicker равным этому полю состояния.
  3. В onChange вашего <Field> и onChange вашего DatePicker вызовите setState, чтобы обновить значение этого поля состояния.
  4. Теперь DatePicker и <Field> оба увидят изменение состояния и обновят значение внутри них.

Поиск «Реактивно управляемый ввод» для получения более подробной информации. Здесь является примером.

Обновление 1

Я не проверял следующий код. Возможно, вам придется внести изменения, чтобы преобразовать строку в moment и наоборот. Тег DatePicker также будет меняться в зависимости от используемой вами библиотеки DatePicker. Но этот псевдо код должен дать вам представление о том, как решить проблему.

В основном у меня есть DatePicker и input, оба из которых показывают dob из состояния компонента. А когда их значения изменяются, функции onSomethingChange обновляют значение состояния, следовательно, обновляются как DatePicker, так и input. Надеюсь, это поможет. 

this.state = {
  dob: moment(props.dob)
};

<DatePicker
    date={this.state.dob}
    onDateChange={this.onDateChange}
    ... other attributes
/>

<input
    type="text"
    value={this.state.dob}
    onChange={this.onInputDateChange}
    ... other attributes
/>

onDateChange = (dob) => {
    if (dob) {
      this.setState(() => ({ dob }));
    }
};

onInputDateChange = (e) => {
    const dob = e.target.value;
    if (dob) {
      this.setState(() => ({ dob }));
    }
};
...