时间戳

首页 > 解决方案 > this.state 反应

reactjs - this.state 反应

问题描述

我是学生，第一次做这种项目，也是第一次使用 React 和这种语法。我已经遵循了一些教程，但现在被卡住了。

当您单击时，所有数字应加在一起。

我在哪里做错了？是我解析输入的地方吗？我整个周末都尝试了不同的方法，但没有成功。请帮助我更进一步。

import React, { Component } from "react";
import './App.css';
import Button from './components/Buttons'; 
import Input from './components/Inputs';
import ClearButton from './components/ClearButtons';


class App extends Component {



  constructor(props) {
    super(props);

    this.state = {
      input: "",
      operator: ""
    };
  }


  addToInput = val => {
    this.setState({ input: this.state.input + val });
  }

  // If this.state.input is not empty then add zero
  // If this.state.input is not blank (another number has already been added in)
  addZeroToInput = val => {
    if (this.state.input !== "") {
      this.setState({ input: this.state.input + val });
    }
  };

  // Input = blank 
  clearInput = () => {
    this.setState({ input: "" });
  };

  add = () => {
    this.setState({ input: ""});
    this.state.operator = "plus";

    if (this.state.operator == "plus") {
      this.setState({
        input:
          parseInt(this.state.input) +
          parseInt(this.state.input)
      });
    }
  };

  mult = () => {
    this.setState({ input: "" });
    this.state.operator = "multiply";

    if (this.state.operator == "multiply") {
      this.setState({
        input:
          parseInt(this.state.input) *
          parseInt(this.state.input)
      });
    }
  };

  render() {

    return (
      <div className="App">
        <div className="wrapper">
          <div className="row">
            <Input>{this.state.input}</Input>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>7</Button>
            <Button handleClick={this.addToInput}>8</Button>
            <Button handleClick={this.addToInput}>9</Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>4</Button>
            <Button handleClick={this.addToInput}>5</Button>
            <Button handleClick={this.addToInput}>6</Button>
          </div>
          <div className="row">
            <Button handleClick={this.addToInput}>1</Button>
            <Button handleClick={this.addToInput}>2</Button>
            <Button handleClick={this.addToInput}>3</Button>
          </div>
          <div className="row">
            <Button handleClick={this.add}>+</Button>
            <Button handleClick={this.addZeroToInput}>0</Button>
            <Button handleClick={this.multiply}>*</Button>
          </div>
          <div className="row">
            <ClearButton handleClear={this.clearInput}>Clear</ClearButton>
          </div>
        </div>
      </div> 
    );
  }
}

export default App;

标签： reactjs

解决方案

现在当我点击 4444 + 它显示 8888 但它应该显示 16。

您的添加功能包括：

this.setState({
  input:
    parseInt(this.state.input) +
    parseInt(this.state.input)
});

在这种情况下，您this.state.input将其"4444"解析为整数并基本上将其添加到自身，这就是为什么它是8888.

如果您想要的输出是将每个数字彼此相加，如 中4+4+4+4，那么您需要this.state.input按每个数字拆分，将其解析为整数，然后将其相加。

> "4444".split("")
[ '4', '4', '4', '4' ]
> "4444".split("").map(Number)
[ 4, 4, 4, 4 ]
> "4444".split("").map(Number).reduce((x, y) => x + y)
16

不相关，但您应该遵循@Hemadri 关于如何设置 Button 的建议handleClick。或者，或者，只是这样做：

<button onClick={(e) => this.addToInput(e)}>1</button>


addToInput = event => {
  this.setState({input: this.state.input + event.target.innerText});
}

另外不要直接改变状态，使用setState()函数。

你也可以结合这个：

this.setState({input: ""});
this.state.operator = "plus";

进入这个：

this.setState({
  input: "",
  operator: "plus"
});

并摆脱，if (this.state.operator == "plus")因为您只是将运算符设置为，plus因此您无需检查它。

推荐阅读