Question

基本上，我的表单中有一个反应日期选择器作为redux表单字段。我允许用户使用redux-form重置道具清除整个表单。奇怪的是，日期选择器在我的表单数据中被识别，但是当我尝试清除整个页面时，这是唯一无法清除的字段。

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值。

// import React from 'react';
// import ReactDOM from 'react-dom';
// import { Provider } from 'react-redux';
// import { createStore  } from 'redux';
// import reducers from './redux/reducers';
// import App from './components/App';


ReactDOM.render(
    <Provider store={createStore(reducers)}>
      <App />
    </Provider>,
    document.querySelector('#root')
);

React / Redux：当它与redux-form合并时，是否有一种方法可以清除react日期选择器？

1 个答案: