0

Новичок в React и пока не совсем все понимаю. Пытаюсь изменить состояние компонента. Пишут что на прямую нельзя менять, только используя setState.

Когда вывожу в консоль, состояние получается такое же как было изначально - пустой массив. Подскажите, в чем моя ошибка. Скрипт на самом деле сложнее, просто я убрал все лишнее, чтобы проверить только изменение состояния

class DateRange extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this)

    this.state = {
      currentTime: new Date(),
      periodYear: []
    };
  }
  onChange() {
    console.log('Событие работает')
    this.setState({ periodYear: [1, 2, 3] }); //Здесь ставлю массив с   недельными периодами в течение года
    console.log(this.state.periodYear);
  }

  render() {
    return this.renderView();
  }

  renderView() {
    return (
      <div>
        <input type="date" onChange={this.onChange} />
      </div>
    );
  }
}

ReactDOM.render(<DateRange />, document.getElementById("dateRange"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="dateRange"></div>

1 ответ 1

0

Требуется забайндить this на класс в конструкторе. Иначе this не указывает на класс.

Вы должны быть осторожны со значением this в callback функциях JSX. В JavaScript методы класса не связаны по умолчанию. Если вы забудете связать this.handleClick и передать его onClick, onClick вернет undefined, когда функция будет вызывается.

class DateRange extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentTime: new Date(),
      periodYear: []
    };

    this.onChange= this.onChange.bind(this); // <----
  }
  onChange() {
    console.log('Событие работает')
    this.setState({ periodYear: [1, 2, 3] }); //Здесь ставлю массив с   недельными периодами в течение года
  }

  render() {
    return this.renderView();
  }

  renderView() {
    return (
      <div>
        <input type="date" onChange={this.onChange} />
      </div>
    );
  }
}

ReactDOM.render(<DateRange />, document.getElementById("dateRange"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="dateRange"></div>

http://thewebland.net/development/javascript/reactjs/obrabotka-sobytij-v-react-js/ https://reactjs.org/docs/handling-events.html

4
  • С этой проблемой я уже сталкивался, забыл в код эту строку добавить. Проблема немного в другом: состояние periodYear не меняется после вызова this.setState()
    – shub1nk
    21 авг 2018 в 7:58
  • Заметил что в консоли состояние не изменяется, а в браузере меняется информация, которая в этом состоянии записана
    – shub1nk
    21 авг 2018 в 9:01
  • В каком месте ты проверяешь state в консоле, если сразу после this.setState(), то он и не должен измениться в тот же момент, (reactjs.org/docs/react-component.html#setstate) "Обновления состояния может быть асинхронным".
    – Kol007
    21 авг 2018 в 10:35
  • Точно. Я помню эту фразу про ассинхронность. Спасибо, большое. Надо просто повнимательнее документацию читать
    – shub1nk
    21 авг 2018 в 12:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.