Как изменить значение состояния с помощью кнопки клика

Я пишу код JSX, чтобы создать кнопку сброса, в которой я могу сбросить значение таймера, используя «состояние». Проблема в том, что когда я нажимаю кнопку, ничего не происходит вместо того, чтобы изменить значение. (Даже когда я хотите отобразить консольное сообщение через функцию сброса, ничего не происходит)

Создал переменную «state.timer», чтобы добавить значение для отображения. Функция для сброса значения «таймер» и изменения его на 0. Кнопка, которая вызывает функцию сброса для сброса.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };

    function resetTime() {
      this.setState({ timer: 0 });
    }
  }
  render() {
    return (
      <div className = "App">
        <h2>{this.state.timer}</h2>
        <button onClick = {this.resetTime}>Reset</button>
      </div>
    );
  }
}

ReactDOM.render(<Timer />, document.getElementById("root"));

Ожидается отображение 0, когда я нажимаю кнопку сброса, вместо этого значение по-прежнему отображается 90.

Вы обращаетесь к методу setState статически.. это должно быть this.setState({timer:0})...

— 16.02.2019 17:37

ничего не меняется, я думаю, что кнопка onClick не работает.

— 16.02.2019 17:40

Я изменил код функции сброса, протестировав его через msg display console.info, но тоже ничего не происходит. Я думаю, что кнопка нажатия не работает. Вот мой код: codeandbox.io/s/033xl8kjmn

— 16.02.2019 17:42

javascript reactjs

16.02.2019 17:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Состояние соответствует экземпляру компонента, не является статической переменной вашего класса. Вместо доступа через Timer.setState вызовите его из экземпляра с помощью this.setState.

16.02.2019 17:39

Попробуйте что-нибудь вроде этого. Вам нужно будет привязать функцию к конструктору.

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 90
    };
    this.resetTime = this.resetTime.bind(this);
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    return (
      <div className = "App">
        <h2>{this.state.timer}</h2>
        <button onClick = {this.resetTime}>Reset</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вы также можете использовать функции стрелок, но этот метод основан на предложенной функции свойства класса. Чтобы использовать этот подход, вы должны включить свойства класса преобразования или включить этап-2 в Бабеле. Если вы используете Create-React-App, оно уже будет настроено.

 resetTime =()=> {
      this.setState({ timer: 0 });
 }

Или вы можете использовать стрелочные функции resetTime = () => { ... } вместо привязки в конструкторе.

— 16.02.2019 17:50

16.02.2019 17:43

Ответ принят как подходящий

Проблема

У тебя было несколько ошибок.

Вам нужно использовать this вместо Timer при доступе к setState (например: this.setState())
Вам нужно обернуть обратный вызов onPress в анонимную функцию, чтобы context не потерялся (например: onPress = {()=>this.resetTime()} )

Присвоение деструктуризации:

Написание const {timer} = this.state; точно так же, как const timer = this.state.timer;

Думайте об этом как о более простом и элегантном способе доступа к свойствам.

Зачем это отделять? Хорошо, если у вас есть несколько свойств в состоянии (не только таймер). Это означало бы, что вам придется писать this.state.timer, this.state.someOtherProperty, this.state.somethingElse. Зачем делать это и усложнять чтение, когда можно просто сделать это.

const {timer, someOtherProperty, somethingElse} = this.state;

Код обновлен:

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className = "App">
        <h2>{timer}</h2>
        <button onClick = {() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

Рабочий пример здесь.

const {таймер} = this.state. Пожалуйста, как начинающий программист, объясните мне этот код. Вы вызываете this.state.timer через этот код? поскольку я не понял {timer}, я знаю только this.state.variableName, чтобы вызвать значение состояния.

— 16.02.2019 17:58

16.02.2019 17:47