Почему возникает ошибка?

Question

[Jedi]

Добрый вечер.

Помогите пожалуйста решить проблему.

Проблема что-то связанное с input`ами.

Вот код:

import React, { Component } from 'react';
import '../styles/Register.css';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { registerUser } from '../redux/actions/authActions';

class Register extends Component {
    constructor() {
        super();

        this.state = { name: {inputValue: '', fieldActive: false}, email: '', password: '', password_confirmation: '', errors: {} };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.updateInputValue = this.updateInputValue.bind(this);
        this.activateField = this.activateField.bind(this);
        this.disableFocus = this.disableFocus.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        const data = {
            name: this.state.name,
            email: this.state.email,
            password: this.state.password,
            password_confirmation: this.state.password_confirmation,
        }

        this.props.registerUser(data, this.props.history)
    }

    activateField(e) {
        console.log('hello', e.target.id);
        this.setState({
            [e.target.id]: { fieldActive: true },
        });
    }

    disableFocus(e) {
        console.log('bye bye', e.target.id);
        if (e.target.value === "") {
            this.setState({
                [e.target.id]: { fieldActive: false },
            });
        }
    }

    updateInputValue(e) {
        this.setState({
            [e.target.id]: { inputValue: e.target.value },
        });

        this.activateField(e);
        e.preventDefault();
    }



    componentWillMount() {
        if (this.props.auth.isAuthenticated) {
            this.props.history.push('/')
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.auth.isAuthenticated) {
            this.props.history.push('/')
        }

        if (nextProps.errors) {
            this.setState({ errors: nextProps.errors })
        }
    }

    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-6">
                        <form onSubmit={this.handleSubmit}>
                            <div className="floating">
                                <label style={{zIndex: '-1'}} className={this.state.name.fieldActive ? "floating-label field-active" : "floating-label"}>Name</label>
                                <input type="text"
                                       className="floating-label-input"
                                       id="name"
                                       value={this.state.name.inputValue}
                                       onFocus={this.activateField}
                                       onBlur={this.disableFocus}
                                       onChange={this.updateInputValue}
                                />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    auth: state.auth,
    errors: state.errors,
})

export default connect(mapStateToProps, { registerUser })(withRouter(Register));

Ошибка:



Все вроде работает, но почему-то ошибка...

Работает все это так:


Заранее спасибо!

Comments

[0xD34F]

Добрый вечер.
<...>
Заранее спасибо!

Что этот мусор добавляет к описанию проблемы? Ничего. Так на хрена его сюда вываливать?

[Jedi]

0xD34F, Ну, а чего не хватает? При клике следующая ошибка... Мне еще bundle сюда кидать что-ли?)

[0xD34F]

PHPjedi, да всё понятно с вашей ошибкой. Ещё раз - вы зачем сюда пишите всякую хрень, которая никакого отношения не имеет к сути ваших проблем? Думаете, интересно читать ваши "спасибы"? Нет, неинтересно. Думаете, вы так проявляете вежливость по отношению к тем, кто откроет ваш вопрос? Нет, всё как раз наоборот.

[Jedi]

0xD34F, не понимаю почему когда проявляют, ну, по крайней мере уважение к читателю, это вызывает у вас раздражение... Окай, буду писать впредь так, как будто мне все тостерорвцы должны.

Не хотите отвечать, не пишите вовсе. Не тратьте мое время, и свое тоже.

[0xD34F]

PHPjedi,

не понимаю почему когда проявляют, ну, по крайней мере уважение к читателю

Никакое это не уважение. Люди сюда заходят не затем, чтобы узнать, что ваши мама-папа научили вас говорить вежливые слова.

Не тратьте мое время, и свое тоже.

Интересно, а заставлять людей, открывающих ваш вопрос, продираться сквозь все эти никчёмные "добрые вечера" и "спасибы" - не есть ли это бесполезная (и как бы даже наглая) трата чужого времени? Вы подумайте над этим.

[Jedi]

0xD34F, н-да... День не удался, да? Ладненько, буду иметь ввиду. Спокойной ночи. :)

[Jedi]

0xD34F, Как считаешь, правильное ли решение для решения проблемки?

Я добавил в inputValue: e.target.value.

activateField(e) {
        console.log('hello', e.target.id);
        this.setState({
            [e.target.id]: { inputValue: e.target.value, fieldActive: true },
        });
    }

    disableFocus(e) {
        console.log('bye bye', e.target.id);
        if (e.target.value === "") {
            this.setState({
                [e.target.id]: { inputValue: e.target.value, fieldActive: false },
            });
        }
    }

Ошибки больше нет.

Answer 1

[karambafe]

А вы уверены, что вот тут стейт корректно обновляется?

this.setState({
  [e.target.id]: { inputValue: e.target.value },
});

Попробуйте использовать prevState и spread для явной перезаписи:

updateInputValue({ target: { id, value } }) {
  this.setState(prevState => ({ 
     [id]: {
        ...prevState.id,
        inputValue: value,
     },
  }));
}

Comments

[Jedi]

Я вот добавил inputValue: e.target.value и ошибки больше нет. Но правильное ли это решение? Написал бы это так грамотный разработчик?

activateField(e) {
        console.log('hello', e.target.id);
        this.setState({
            [e.target.id]: { inputValue: e.target.value, fieldActive: true },
        });
    }

    disableFocus(e) {
        console.log('bye bye', e.target.id);
        if (e.target.value === "") {
            this.setState({
                [e.target.id]: { inputValue: e.target.value, fieldActive: false },
            });
        }
    }

[karambafe]

В моем понимании "грамотный разработчик" организовал бы этот код так:
1. Сделал бы плоскую структуру с state, потому что с ними проще работать, да в данной компоненте есть всего лишь 1 инпут

state = {
  value: '',
  isActive: false,
  // другие стейты
};

2. Переименовал бы хендлеры, но это вкусовщина от из airbnb стайлгайда :)

<input type="text"
  className="floating-label-input"
  value={this.state.name.value}
  onFocus={this.handleFocus}
  onBlur={this.handleBlur}
  onChange={this.handleChange}
/>

3. Разнес бы логику для значения инпута и активного класса:

handleChange = ({ target: { value } }) => this.setState({ value })

handleFocus = ({ target: { value } }) => this.setState({ isActive: true })
  
handleBlur = ({ target: { value } }) => {
  if (value !== '') return;
  this.setState({ isActive: false });
}

Answer 2

[nluparev]

PHPjedi ошибка где происходит устнавка и выборка из стейта.

this.setState({
            [e.target.name]: e.target.value
        });

и выборка из стейта

value={this.state.name}

Answer 3

[Владимир Калачев]

<input type="text"
                                       className="floating-label-input"
                                       id="name"
                                       value={this.state.name.inputValue || ''}
                                       onFocus={this.activateField}
                                       onBlur={this.disableFocus}
                                       onChange={this.updateInputValue}

Из-за того, что изначальное значение inputValue undefined, а затем оно меняется на какое-то при вводе данных возникает такая ошибка. Если отсутствует атрибут value, реакт считает input неконтролируемый.