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

Question

[Владимир Голубь]

После задания 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] : "");
        }
    }

Comments

[Антон Спирин]

Ошибки в консоли проверяли? console.log в ключевых блоках выводили?

[Владимир Голубь]

Антон Спирин, ошибок нет

[Антон Спирин]

Владимир Голубь, console.log выводили? Поставьте на входе и в каждом блоке условного оператора.

[Владимир Голубь]

Антон Спирин,

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

        event.preventDefault();

        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] : "");
        }
    }

После нажатие на удаление символа происходит такое
Срабатывание функции handlerInputChange
Date.js:38 Переданное значение: 17.04.201

но больше одного не удаляет, а значение в input не изменно.
Хотя console.log('Задание state'); больше не происходит

[Антон Спирин]

Владимир Голубь, условие if (resultMatch && resultMatch.length > 0) { возвращает false.

Так как регулярка совпадений не находит.

Answer 1

[Владимир Голубь]

Решение проблемы оказалось простое, после каждого изменения поля нужно изменять 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] : "");
        }
    }