Cannot read property 'setState' of undefined [дубликат]

130
25 января 2021, 19:30
На этот вопрос уже даны ответы здесь:
Потеря контекста вызова (5 ответов)
Закрыт 1 год назад.
import React from "react";
import UIkit from "uikit";
import ReactDOM from "react-dom"
class PlaceUpdater extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      description: "",
      count_of_day: 0,
      low_price: 0,
      high_price: 0,
      // photo: null, TODO--FIRST сделать добавление фото и тегов 
      // tags: null
    };
    this.onChange = this.handleChange.bind(this)
  }
  handleChange (event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  handleSubmit(event) {
    //TODO make form request here
  }
  render() {
    var bar = document.getElementById("js-progressbar");
    UIkit.upload(".js-upload", {
      url: "",
      multiple: false,
      beforeSend: function() {
        console.log("beforeSend", arguments);
      },
      beforeAll: function() {
        console.log("beforeAll", arguments);
      },
      load: function() {
        console.log("load", arguments);
      },
      error: function() {
        console.log("error", arguments);
      },
      complete: function() {
        console.log("complete", arguments);
      },
      loadStart: function(e) {
        console.log("loadStart", arguments);
        bar.removeAttribute("hidden");
        bar.max = e.total;
        bar.value = e.loaded;
      },
      progress: function(e) {
        console.log("progress", arguments);
        bar.max = e.total;
        bar.value = e.loaded;
      },
      loadEnd: function(e) {
        console.log("loadEnd", arguments);
        bar.max = e.total;
        bar.value = e.loaded;
      },
      completeAll: function() {
        console.log("completeAll", arguments);
        setTimeout(function() {
          bar.setAttribute("hidden", "hidden");
        }, 1000);
        alert("Upload Completed");
      }
    });
    return (
      <div>
        <div id="modal-example" uk-modal="">
          <div className="uk-modal-dialog uk-modal-body">
            <form onSubmit={this.handleSubmit}>
              <div className="uk-margin" id="input_name">
                <input
                  value={this.state.name}
                  name="name"
                  className="uk-input"
                  type="text"
                  placeholder="Название"
                  onChange={this.handleChange}
                />
              </div>
              <div className="uk-margin" id="input_description">
                <input
                  value={this.state.description}
                  name="description"
                  className="uk-input uk-width-1-1"
                  type="text"
                  placeholder="Описание"
                  onChange={this.handleChange}
                />
              </div>
              <div className="uk-margin" id="input_count_day">
                <input
                  value={this.state.count_of_day}
                  name="count_of_day"
                  className="uk-input uk-width-1-1"
                  type="text"
                  placeholder="Количество дней"
                  onChange={this.handleChange}
                />
              </div>
              <div className="uk-margin" id="input_count_day">
                <input
                  value={this.state.low_price}
                  name="low_price"
                  className="uk-input uk-width-1-2"
                  type="text"
                  placeholder="Минимальная стоимость"
                  onChange={this.handleChange}
                />
                <input
                  value={this.state.high_price}
                  name="high_price"
                  className="uk-input uk-width-1-2"
                  type="text"
                  placeholder="Максимальная стоимость"
                  onChange={this.handleChange}
                />
              </div>
              {/* <div className="uk-margin" id="input_count_day">
                <input
                  className="uk-input uk-width-1-1"
                  type="text"
                  placeholder="Спец-цена"
                />
              </div>
              <div className="uk-margin" id="input_count_day">
                <input
                  className="uk-input uk-width-1-1"
                  type="text"
                  placeholder="Спец-описание"
                />
              </div>
              <div className="uk-margin" id="input_count_day">
                <input
                  className="uk-input uk-width-1-1"
                  type="text"
                  placeholder="теги"
                />
              </div> */}
              {/* Add PHOTOS */}
              {/* <div className="js-upload" uk-form-custom="">
                <input type="file" name="file" multiple={true} />
                <button
                  value={this.state.photo}
                  name="photo"
                  className="uk-button uk-button-default"
                  type="button"
                  tabIndex="-1"
                  handleChange={this.handleChange}
                >
                  Выбрать фото
                </button>
              </div>
              <progress
                id="js-progressbar"
                className="uk-progress"
                value="0"
                max="100"
                hidden=""
              /> */}
            </form>
            <p className="uk-text-right">
              <button
                className="uk-button uk-button-default uk-modal-close"
                type="button"
              >
                Отмена
              </button>
              <button className="uk-button uk-button-primary" type="button">
                Сохранить
              </button>
            </p>
          </div>
        </div>
      </div>
    );
  }
}
export default PlaceUpdater;

при изменении импута какого либо, возникает ошибка - Cannot read property 'setState' of undefined.

Answer 1

Спасибо @ThisMan (см. коменты) handleChange в инпутах заменить на onChange

READ ALSO
Как запретить менеджеру паролей в Chrome влиять на шрифт в инпуте?

Как запретить менеджеру паролей в Chrome влиять на шрифт в инпуте?

Менеджер паролей изменяет шрифт, когда наводишь на какой-нибудь айтемКак можно этого избежать? Сталкивался кто? Два скриншота прилагаю

86
Проблемы vue css

Проблемы vue css

Всем привет!Сделал приложение на vueВыкладываю проект на github pages и начинаются проблемы с css,а главный фокус в том , что некоторые стили работают...

185
Добавление .ico 16x16 на сайт в меню html

Добавление .ico 16x16 на сайт в меню html

Как добавить иконку в менюшку на сайт? Как на картинке точки перед: новости, пресса ит

119
Приоритет операций

Приоритет операций

Не могу понять одну странность с приоритетом операторов в C++

106