Функция onChange для полей ввода не работает

Question

Попытка изменить состояние полей ввода, но onChange, похоже, не работает, а поля ввода отключены (не позволяя мне печатать)

constructor() {
    super();
    this.state = {
        title: '',
        length: '',
        image: '',
        source: '',
        available: '',
        date: '',
        errors: {}
    }
    this.onChange = this.onChange.bind(this);
}

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

<input value={this.state.length} onChange={this.onChange} type="text" 
    className="form-control" name="email" placeholder="e.g. 3:36" />

Answer 1

** ОБНОВЛЕНО: ** ваша основная ошибка - вы связываете свой ввод с переменной состояния, называемой «длина», а имя входа - «электронная почта», они должны быть одинаковыми.

Вы можете сделать это проще для себя, вам вообще не нужно связываться с конструктором, если вы используете функции со стрелками, так что, если вы напишите свою функцию следующим образом:

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

Ваш конструктор и состояние будут выглядеть так:

constructor() {
     super();
 this.state = {
    title: '',
    email: '',
    image: '',
    source: '',
    available: '',
    date:'',
    errors: {}
}

}

И в JSX вы по-прежнему передаете свои свойства таким же образом, например:

<input value={this.state.email} onChange={this.onChange} type="text"
        className="form-control" name="email" placeholder="e.g. 3:36" />

Полная рабочая демонстрация:

Answer 2

2 вещи:

Ваша функция setState обновляет значение в состоянии на основе имени целевого узла события, и здесь имя («электронная почта») не соответствует значению, которое вы получаете в своем состоянии (длина).

Вторая ошибка в том, что ваш onChange не привязан к вашему классу, вызов this.setState вернет ошибку.

Вы можете решить эту проблему, изменив значение переменной на вашем входе:

<input value={this.state.email} onChange={this.onChange} type="text" className="form-control" name="email" placeholder="e.g. 3:36"/>

И преобразование onChange в функцию со стрелкой (или ее связывание):

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