我的第一个 React 应用程序：使用 codepen 的计算器

Question

我目前有 2 个主要问题。

第一个我不明白为什么但是我不能使用<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,
      };
    }     
  });
}

当我触发函数时，检查失败并仍然添加一个点。

这是codepen link https://codepen.io/Dali213/pen/QWbwbOb

Answer 1

默认情况下，<button> 元素属于 type="submit"。所以在这种情况下，您可以使用 <button type="button"> 来达到与 <input type="button"> 相同的效果。 <button> 元素更容易应用 CSS。

带有 type="submit" 的按钮在发布到 <form> 时也很有用，而带有 type="button" 的按钮对于非表单帖子很有用。

关于你的第二个问题，我没有看到你描述的问题。

当我单击调用 addDecimal 函数的按钮时，第一次运行正确添加 . 并注销 console.log(prevState); 然后任何调用该函数后的时间此代码成功运行: if (prevState.input.includes(".")) {return prevState}

如果 state.input 已经包含小数，您可以通过提早退出来简化此函数：

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

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

我的第一个 React 应用程序：使用 codepen 的计算器

My first react app: a calculator using codepen

javascript

function

calculator

reactjs