Не могу изменить input с value из state?

После задания value через state не могу изменить его вручную, как это исправить ?

<input
                        onChange={(event) => this.handlerInputChange(event.target.value)}
                        value={this.state.dateInput}/>

    handlerInputChange = (date) => {

        let dateRegExp = /([0-9]{2}.[0-9]{2}.[0-9]{4})/,
            resultMatch,
            dateDelivery;

        let {
            minDate,
            maxDate
        } = this.props;

        resultMatch = date.match(dateRegExp);

        if (resultMatch && resultMatch.length > 0) {
            dateDelivery = new Date(resultMatch[1].replace(/([0-9]{2}).([0-9]{2}).([0-9]{4})/, '$3-$2-$1'));

            if (dateDelivery && (minDate && dateDelivery < minDate || maxDate && dateDelivery > maxDate)) {
                return false;
            }

            this.setState({
                date: moment(dateDelivery),
                dateInput: resultMatch[1]
            });

            this.props.onChange(resultMatch[1] ? resultMatch[1] : "");
        }
    }
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
RazerVG
@RazerVG Автор вопроса
FrontEnd
Решение проблемы оказалось простое, после каждого изменения поля нужно изменять state

handlerInputChange = (event) => {
        console.log('Срабатывание функции handlerInputChange ');
        console.log('Переданное значение: ', event.target.value);

        event.preventDefault();

        this.setState({
            date: null,
            dateInput: event.target.value
        })

        let dateRegExp = /([0-9]{2}.[0-9]{2}.[0-9]{4})/,
            resultMatch,
            dateDelivery;

        let {
            minDate,
            maxDate
        } = this.props;

        resultMatch = event.target.value.match(dateRegExp);

        if (resultMatch && resultMatch.length > 0) {
            console.log('Задание state');

            dateDelivery = new Date(resultMatch[1].replace(/([0-9]{2}).([0-9]{2}).([0-9]{4})/, '$3-$2-$1'));

            if (dateDelivery && (minDate && dateDelivery < minDate || maxDate && dateDelivery > maxDate)) {
                console.log('Ошибка');
                return false;
            }

            this.setState({
                date: moment(dateDelivery),
                dateInput: resultMatch[1]
            });

            this.props.onChange(resultMatch[1] ? resultMatch[1] : "");
        }
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы