React点击按钮State不更新？加法功能实现问题求助

嘿，我帮你拆解下这个加法程序的问题，一步步来修复它：

错误原因分析 #

• addAction的this指向丢失：你没有在构造函数里绑定this.addAction，导致点击按钮时，方法里的this是undefined，根本没法访问this.state或者调用this.setState。
• 错误获取数值的方式：你在addAction里写的var num1=this.setState({ num1: event.target.value })完全搞错了逻辑——event.target是你点击的那个"Add"按钮，它的value是字符串"Add"，而且setState是用来更新状态的异步方法，不会返回当前状态值。你应该直接从this.state里读取已经存储的num1和num2。
• 字符串拼接陷阱：输入框的value默认是字符串类型，直接用+会变成字符串拼接（比如输入1和2会得到"12"而不是3），必须先转成数字再计算。

修正后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

class Grade extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 0,
      num1: 0,
      num2: 0
    };
    // 别忘了绑定addAction的this！
    this.handlenum1Change = this.handlenum1Change.bind(this);
    this.handlenum2Change = this.handlenum2Change.bind(this);
    this.addAction = this.addAction.bind(this);
  }

  handlenum1Change(evt) {
    // 转成数字存储，避免后续计算麻烦
    this.setState({ num1: Number(evt.target.value) });
  }

  handlenum2Change(evt) {
    this.setState({ num2: Number(evt.target.value) });
  }

  addAction() {
    // 直接从state取数值，然后计算
    const { num1, num2 } = this.state;
    this.setState({ result: num1 + num2 });
  }

  render() {
    return (
      <form>
        <label>
          第一个数:
          {/* 把state的值绑定到输入框，实现双向绑定的视觉反馈 */}
          <input type="number" value={this.state.num1} onChange={this.handlenum1Change} />
        </label>
        <label>
          第二个数:
          <input type="number" value={this.state.num2} onChange={this.handlenum2Change}/>
        </label>
        <input type="button" onClick={this.addAction} value="Add"/>
        <input type='text' value={this.state.result} readonly/>
      </form>
    );
  }
}

export default Grade;

关键优化点说明 #

1. 绑定addAction的this：在构造函数里添加this.addAction = this.addAction.bind(this);，确保方法里的this指向组件实例。
2. 输入值转数字存储：在handlenum1Change和handlenum2Change里，用Number(evt.target.value)把输入的字符串转成数字再存入state，后续计算就不用重复转换了。
3. 输入框绑定state值：给输入框加上value={this.state.num1}，让输入框的显示和state保持一致，这是React单向数据流的规范写法。
4. 正确读取状态计算：在addAction里直接从this.state解构出num1和num2，相加后更新result状态。

内容的提问来源于stack exchange，提问作者Leo Bogod