如何为 react-datepicker 赋予初始值？

Question

我正在使用react-datepicker

这是我的代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// Moment
import moment from 'moment';
// Components
import { TextField } from './Text';
// DatePicker 
import DatePicker, { registerLocale } from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

import ar from 'date-fns/locale/ar-SA';
registerLocale('ar', ar);    

const CustomInput = (props) => {
  const { label, value, helperText, disabled, placeholder, onClick } = props;

  return (<TextField
    size={'lg'}
    label={label}
    value={value}
    disabled={disabled}
    placeholder={placeholder}
    onClick={onClick}
    helperTextErrorMessage={helperText}
  />
);
  }

class DateField extends Component {
    state = {
      startDate: this.props.value
    };
  
    handleChange = startDate => {
      const { name, onChange } = this.props;
      console.log(startDate);
      this.setState({ startDate }, () => {
        if(name) {
          onChange(name, startDate);
        } else {
          onChange(startDate);
        }
      });
    };
  
    render() {
      const {
        name,
        label,
        // value,
        withPortal,
        disabled,
        readOnly,
        required,
        children,
        dateFormat,
        helperText,
        placeholder,
        isClearable,
        closeOnSelect,
        showTimeSelect,
        showPopperArrow,
        showWeekNumbers,
        showMonthDropdown,
      } = this.props;

      return (
        <DatePicker
          name={name}
          locale={'ar'}
          // value={value}
          id={`${name}-date-picker`}
          disabled={disabled}
          readOnly={readOnly}
          required={required}
          withPortal={withPortal}
          dateFormat={dateFormat}
          isClearable={isClearable}
          placeholderText={placeholder}
          selected={this.state.startDate}
          showTimeSelect={showTimeSelect}
          showPopperArrow={showPopperArrow}
          showWeekNumbers={showWeekNumbers}
          shouldCloseOnSelect={closeOnSelect}
          showMonthDropdown={showMonthDropdown}
          onChange={this.handleChange}
          // override Input
          customInput={<CustomInput { ...this.props } />}
          // Override Popper
          // popperClassName="some-custom-class"
          popperPlacement="top-right"
          popperModifiers={{
            offset: {
              enabled: true,
              offset: "50px, 10px"
            },
            preventOverflow: {
              enabled: true,
              escapeWithReference: false,
              boundariesElement: "viewport"
            }
          }}
        />
      );
    }
  }

DateField.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,
  helperText: PropTypes.string,
  dateFormat: PropTypes.string,
  placeholder: PropTypes.string,
  
  children: PropTypes.any,

  required: PropTypes.bool,
  disabled: PropTypes.bool,
  readOnly: PropTypes.bool,
  withPortal: PropTypes.bool,
  isClearable: PropTypes.bool,
  closeOnSelect: PropTypes.bool,
  showTimeSelect: PropTypes.bool,
  showWeekNumbers: PropTypes.bool,
  showPopperArrow: PropTypes.bool,
  showMonthDropdown: PropTypes.bool,

  onChange: PropTypes.func
};

DateField.defaultProps = {
  label: '',
  helperText: '',
  placeholder: '',
  dateFormat: 'yyyy/MM/dd',

  disabled: false,
  readOnly: false,
  required: false,
  withPortal: false,
  isClearable: true,
  closeOnSelect: true,
  showTimeSelect: false,
  showPopperArrow: false,
  showWeekNumbers: false,
  showMonthDropdown: false,

  onChange() {}
};

export { DateField };

据我了解，当日期更改时，我将新值分配给状态，当我记录日期值时，我发现它是这样的 ISO 格式

'Wed Jul 29 2020 00:00:00 GMT+0200 (Eastern European Standard Time)'

但我想从外部为日期选择器设置一个default value，以便在有如下值时更新组件

<DateField 
  name={FormFields.DATE_OF_BIRTH}
  label={strings.dateOfBirth}
  placeholder={strings.chooseDateOfBirth}
  value={'Tue Jul 28 2020 03:27:18 GMT+0200 (Eastern European Standard Time)'}
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

它给了我一个错误

plz note 是来自外部的值，而选择器本身的更改日期是 same

那么如何将值传递给选择器？

更新

我通过正常传递值来解决它，然后在组件中我将值转换为日期对象，因为选择器期望它

    state = {
      startDate: null
    };

    componentDidMount() {
      const { value } = this.props;

      if(value) {
        this.setState({ startDate: moment(value).toDate() });
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

我认为您缺少 DateField 类中的构造函数

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {startDate: props.value};
  }