React / Redux: есть ли способ очистить реагирующее средство выбора даты, когда оно включено в избыточную форму?

Question

По сути, у меня есть средство выбора даты реагирования, включенное в поле формы избыточной формы. Я разрешаю пользователю очистить всю форму, используя опцию сброса избыточной формы. Это странно, потому что указатель даты распознается в моих данных формы, но когда я пытаюсь очистить всю страницу, это единственное поле, которое не очищается.

this.props.reset this.props.change

Мой указатель даты:

const CustomInput = React.forwardRef((props, refs) => {
    const inputProps = props.inputProps;
    inputProps.input.onChange(props.value);
    return (
        <div className="input-button">
            <FormattedTextInput
                {...inputProps}
                ref={refs}
                onFocus={props.onFocus}
                onChange={props.onChange}
                helpText={<span aria-hidden="true">YYYY-MM-DD | HH:MM</span>}
            />
        </div>
    );
});

CustomInput.propTypes = {
    value: PropTypes.string,
    onFocus: PropTypes.func,
    onChange: PropTypes.func,
    inputProps: PropTypes.object
};

const DateTimePicker = props => {
    const [startDate, setStartDate] = useState(null);
    const ref = React.createRef();

    return (
        <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
            minDate={moment()}
            customInput={<CustomInput inputProps={props} ref={ref} />}
            showTimeSelect
            disabledKeyboardNavigation
            timeFormat="HH:mm"
            timeIntervals={15}
            timeCaption="time"
            isClearable
            dateFormat="YYYY-MM-DD HH:mm"
        />
    );
};

export default DateTimePicker;

Мое поле:

<Field
                                className="usaa-input"
                                component={DateTimePicker}
                                label="Future Date"
                                name="futureDate"
                                validate={[required, validDateTimeFormat]}
                                formatting="9999-99-99 99:99"
                            />

Answer 1

Получает значение из startDate useState. UseEffect похоже на componentWillUnmount класса.

Вы должны использовать useEffect для сброса значения startDate, когда эта функция больше не монтируется.

  useEffect(() => {
    return () => {
      setStartDate(null);
    }
  }, []);