Реагировать Antd не удалось получить значение из пользовательского выбора даты - PullRequest
Новая
       16

Реагировать Antd не удалось получить значение из пользовательского выбора даты

0 голосов
/ 02 февраля 2020

В настоящее время я использую пользовательский указатель даты для ввода даты в формате «MMDD» или «MMDDYY» и установки значения в состоянии и использования компонента datepicker в качестве контролируемого компонента. Но при отправке формы значение datepicker не определено.

Пожалуйста, найдите код в окне кодов и исправьте меня в том, что я делаю неправильно в этом.

https://codesandbox.io/s/damp-haze-mmj80

Ответы [ 2 ]

1 голос
/ 02 февраля 2020

Только нужно было добавить цикл componentDidMount: 

componentDidMount = () => {
  this.props.onChange(this.state.value.format('YYYY-MM-DD'));
};

handleOnChange = date => {
  if (!!date) {
    this.setState({ value: date });
    this.props.onChange(date.format('YYYY-MM-DD'));
  }
};

Edit friendly-pare-21zso

0 голосов
/ 02 февраля 2020

Я не использовал эту библиотеку (antd), но просматривая документы для нее, использование этого fieldDecorator добавляет к компоненту два свойства - onChange и value. 

  {getFieldDecorator("date-picker")(<CustomDatePicker />)}

Итак, представьте, что CustomDatePicker имеет эти два свойства. Значение будет значением элемента формы, и ожидается, что onChange будет вызываться как обработчик onChange для ввода формы.

Однако в вашем компоненте CustomDatePicker вы ничего не делаете ни с одним из них. Вместо этого вы отслеживаете значение (и обновляете его с помощью обработчика) локально для этого компонента с локальным состоянием.

Вместо этого вам следует использовать эти два свойства: 

 class CustomDatePicker extends React.Component {
  state = {
    isOpen: false
  };

  render() {
    return (
      <DatePicker
        value={this.props.value}
        format={this.state.isOpen ? ["MMDD", "MMDDYY"] : "MM/DD/YY"}
        placeholder=" -- Select Date --"
        disabledDate={d => d && d > moment(Date.now())}
        onOpenChange={status => {
          this.setState({ isOpen: status });
        }}
        onChange={this.props.onChange}
      />
    );
  }
}

Если вы Если вы хотите выполнить любое начальное значение logi c, или проверку, вы сделаете это на компоненте уровня формы, который управляет состоянием.

...