为什么输入在 React 中没有返回任何内容？

Question

我是 React 的初学者，我正在尝试用它制作小应用程序。事实上，这是我在 React 中制作的第一个应用程序，但我遇到了一个问题。

我正在制作一个小应用程序，它可以输入数字并对其进行加减乘乘，即计算器。这是代码。

const { Component } =  React;

class App extends React.Component {
  state = {
    num1: 0,
    num2: 0,
    answer: 0,
    equation: "",
  };

  handleAdd1 = (number) => {
    this.setState({ num1: number });
  };

  handleAdd2 = (number2) => {
    this.setState({ num2: number2 });
  };

  handleClear = () => {
    this.setState({ num1: 0, num2: 0, answer: 0 });
  };

  handlePlus = (sign) => {
    switch (sign) {
      case "+":
        this.setState({ answer: this.state.num1 + this.state.num2 });
        break;

      case "-":
        this.setState({ answer: this.state.num1 - this.state.num2 });
        break;

      case "x":
        this.setState({ answer: this.state.num1 * this.state.num2 });
        break;
    }
  };

  handleInput = (event) => {
    this.setState({ equation: event.target.value });
  };

  render() {
    return (
      <div>
        <div>
          <h1>{this.state.num1}</h1>
          <button onClick={() => this.handleAdd1(1)}> 1 </button>
          <button onClick={() => this.handleAdd1(2)}> 2 </button>
          <button onClick={() => this.handleAdd1(3)}> 3 </button>
          <button onClick={() => this.handleAdd1(4)}> 4 </button>
          <button onClick={() => this.handleAdd1(5)}> 5 </button>
          <button onClick={() => this.handleAdd1(6)}> 6 </button>
          <button onClick={() => this.handleAdd1(7)}> 7 </button>
          <button onClick={() => this.handleAdd1(8)}> 8 </button>
          <button onClick={() => this.handleAdd1(9)}> 9 </button>
          <button onClick={() => this.handleAdd1(0)}> 0 </button>
        </div>

        <div>
          <h1>{this.state.num2}</h1>
          <button onClick={() => this.handleAdd2(1)}> 1 </button>
          <button onClick={() => this.handleAdd2(2)}> 2 </button>
          <button onClick={() => this.handleAdd2(3)}> 3 </button>
          <button onClick={() => this.handleAdd2(4)}> 4 </button>
          <button onClick={() => this.handleAdd2(5)}> 5 </button>
          <button onClick={() => this.handleAdd2(6)}> 6 </button>
          <button onClick={() => this.handleAdd2(7)}> 7 </button>
          <button onClick={() => this.handleAdd2(8)}> 8 </button>
          <button onClick={() => this.handleAdd2(9)}> 9 </button>
          <button onClick={() => this.handleAdd2(0)}> 0 </button>
        </div>

        <div>
          <button onClick={() => this.handlePlus("+")}>+</button>
          <button onClick={() => this.handlePlus("-")}>-</button>
          <button onClick={() => this.handlePlus("x")}>x</button>
        </div>

        <div>
          <button onClick={this.handleClear}>Clear</button>
          <h1>{this.state.answer}</h1>
          <input type="text"></input>
          <button onClick={() => this.handleInput}>Enter !</button>
          <button onClick={() => console.log(this.state.equation)}>
            Log in console
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

如果你查看程序，你会看到有几个数字，如果你点击它们并添加，你会得到一个 h1 中的结果。但是，这并不是很好，因为您只能添加个位数。因此，如您所见，我添加了一个输入，它将获取方程式并将其记录在控制台中（现在）。但可悲的是，这返回未定义。有什么办法可以解决这个问题吗？

Answer 1

您需要使输入成为受控组件。您可以通过监听onChange事件并将值传递给value属性来制作输入控制组件

<input type="text" value={this.state.equation} onChange={(e)=>this.setState({equation: e.target.value})}

现在你会得到方程式

Answer 2

您忘记映射输入标签的值，您可以将其与状态绑定， 如果您是新来的反应，您现在应该开始使用更清晰的方法，
这是完整的工作解决方案，
https://codesandbox.io/embed/inspiring-tesla-9sjop?fontsize=14&hidenavigation=1&theme=dark

import React, { Component } from "react";

class App extends React.Component {
  state = {
    num1: 0,
    num2: 0,
    answer: 0,
    equation: "",
    value: ""
  };

  handleChange = (e) => {
    this.setState({ equation: e.target.value });
  };

  handleAdd1 = (number) => {
    this.setState({ num1: number });
  };

  handleAdd2 = (number2) => {
    this.setState({ num2: number2 });
  };

  handleClear = () => {
    this.setState({ num1: 0, num2: 0, answer: 0 });
  };

  handlePlus = (sign) => {
    switch (sign) {
      case "+":
        this.setState({ answer: this.state.num1 + this.state.num2 });
        break;

      case "-":
        this.setState({ answer: this.state.num1 - this.state.num2 });
        break;

      case "x":
        this.setState({ answer: this.state.num1 * this.state.num2 });
        break;
    }
  };

  handleInput = (event) => {
    this.setState({ equation: event.target.value });
  };

  render() {
    return (
      <div>
        <div>
          <h1>{this.state.num1}</h1>
          <button onClick={() => this.handleAdd1(1)}> 1 </button>
          <button onClick={() => this.handleAdd1(2)}> 2 </button>
          <button onClick={() => this.handleAdd1(3)}> 3 </button>
          <button onClick={() => this.handleAdd1(4)}> 4 </button>
          <button onClick={() => this.handleAdd1(5)}> 5 </button>
          <button onClick={() => this.handleAdd1(6)}> 6 </button>
          <button onClick={() => this.handleAdd1(7)}> 7 </button>
          <button onClick={() => this.handleAdd1(8)}> 8 </button>
          <button onClick={() => this.handleAdd1(9)}> 9 </button>
          <button onClick={() => this.handleAdd1(0)}> 0 </button>
        </div>

        <div>
          <h1>{this.state.num2}</h1>
          <button onClick={() => this.handleAdd2(1)}> 1 </button>
          <button onClick={() => this.handleAdd2(2)}> 2 </button>
          <button onClick={() => this.handleAdd2(3)}> 3 </button>
          <button onClick={() => this.handleAdd2(4)}> 4 </button>
          <button onClick={() => this.handleAdd2(5)}> 5 </button>
          <button onClick={() => this.handleAdd2(6)}> 6 </button>
          <button onClick={() => this.handleAdd2(7)}> 7 </button>
          <button onClick={() => this.handleAdd2(8)}> 8 </button>
          <button onClick={() => this.handleAdd2(9)}> 9 </button>
          <button onClick={() => this.handleAdd2(0)}> 0 </button>
        </div>

        <div>
          <button onClick={() => this.handlePlus("+")}>+</button>
          <button onClick={() => this.handlePlus("-")}>-</button>
          <button onClick={() => this.handlePlus("x")}>x</button>
        </div>

        <div>
          <button onClick={this.handleClear}>Clear</button>
          <h1>{this.state.answer}</h1>
          <input
            type="text"
            value={this.state.equation}
            onChange={this.handleChange}
          ></input>
          <button onClick={() => this.handleInput}>Enter !</button>
          <button onClick={() => console.log(this.state.equation)}>
            Log in console
          </button>
        </div>
      </div>
    );
  }
}

export default App;