Мое первое приложение реакции: калькулятор с использованием codepen - PullRequest
Новая
       7

Мое первое приложение реакции: калькулятор с использованием codepen

0 голосов
/ 08 февраля 2020

У меня на данный момент две основные проблемы.

Первая, я не понимаю, почему, но я не могу использовать любую <button>. Мне пришлось переключить его на <input type="button"/>.

Во-вторых, моя функция addDecimal не работает, как предполагалось. 

addDecimal(){
  this.setState( prevState => {
    if (prevState.input.includes(".")) { 
      return prevState;
    } else { 
      console.log(prevState);
      return {
        input: prevState.input.concat("."),
        //result: prevState.result,
        //operation: prevState.operation,
      };
    }     
  });
}

Когда я запускаю функцию, проверка не проходит, и все равно добавляется точка.

Вот ссылка на кодовое поле https://codepen.io/Dali213/pen/QWbwbOb

1 Ответ

0 голосов
/ 08 февраля 2020

По умолчанию элемент <button> имеет значение type="submit". Так что в этом случае вы можете использовать <button type="button"> для достижения того же эффекта, что и <input type="button">. <button> элементы легче применять CSS к.

Также кнопки с type="submit" полезны при размещении на <form>, в то время как кнопки с type="button" полезны для сообщений не в форме.

Что касается вашего второго вопроса, Я не вижу проблемы, которую вы описали.

Когда я нажимаю кнопку, которая вызывает функцию addDecimal, при первом запуске она корректно добавляет . и выходит из системы console.log(prevState);, а затем в любое время после вызова этой функции этот код успешно run: if (prevState.input.includes(".")) {return prevState}

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

addDecimal(){
  if (this.state.input.includes(".")) {
    return;
  }

  this.setState( prevState => {
    return {
      input: prevState.input.concat("."),
    }; 
  });
}
...