Не могу сбросить состояние компонента в React
Я пытаюсь сбросить значение даты / текст внутри реагирующего средства выбора даты, когда пользователь вводит недопустимую дату. Вот код:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
date: Date.now()
};
}
render() {
return (
<DatePicker
name="date"
selected={this.state.date && moment(this.state.date, "x")}
onChange={date => {
this.setState({
date: date.valueOf()
});
}}
onBlur={e => {
let date = moment(e.target.value, "LLL", true);
if (date.isValid()) {
this.setState({
date: date.valueOf() // apply good value
});
} else {
this.forceUpdate();
}
}}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={30}
dateFormat="LLL"
timeCaption="Time"
minDate={moment().add(30, "minutes")}
/>
);
}
}
Я пытался поместить его в JSFiddle, но, похоже, у него проблемы с рендерингом компонента response-datepicker, но этот компонент прекрасно отрисовывается в моем собственном коде.
Кажется, проблема в том, что forceUpdate
не вызывает сброса компонента. Мне интересно, происходит ли сброс только для самого выбора календаря, а не для поля ввода (что я и пытаюсь сделать). Я пытался добавить value
свойство и установка его на то же самое, что и selected
собственность, но это не имеет никакого эффекта. Проверка запускается и работает, как и ожидалось, но повторное отображение текста в поле ввода не выполняется.
1 ответ
Нет необходимости форсировать обновление компонента, если состояние не изменилось, и, если состояние изменится, представление все равно будет снова отображено. Принудительное выполнение таких обновлений не приведет к изменениям рендера. Обычно при форматировании дат с моментом я сначала проверяю, что необработанные данные пригодны для преобразования в дату, затем я конвертирую их, и мне никогда не нужно было проверять их снова.