React中点击提交按钮后展示两个State结果的实现求助

嘿，我完全懂你遇到的麻烦——现在输入内容的时候结果就立刻蹦出来，完全没等提交按钮被点击，对吧？其实核心问题就是你现在的结果计算逻辑和输入框的state更新绑在一起了，咱们把它们拆开，用一个独立的result state来专门存储提交后的结果就行。

先给你一个完整的修正代码，咱们一步步说清楚：

import React, { Component } from 'react';

class AppComponent2 extends Component {
  constructor(props) {
    super(props);
    // 初始化三个state：两个输入值 + 一个专门存提交后结果的state
    this.state = {
      input1: '',
      input2: '',
      result: null // 初始设为null，代表还没有提交过结果
    };
    // 绑定事件处理函数的this，避免setState时出现上下文错误
    this.handleInput1Change = this.handleInput1Change.bind(this);
    this.handleInput2Change = this.handleInput2Change.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // 只负责更新第一个输入框的state，不碰结果
  handleInput1Change(e) {
    this.setState({
      input1: e.target.value
    });
  }

  // 只负责更新第二个输入框的state，不碰结果
  handleInput2Change(e) {
    this.setState({
      input2: e.target.value
    });
  }

  // 只有点击提交按钮时，才计算并更新结果state
  handleSubmit() {
    // 这里替换成你实际的计算逻辑，比如数值相加/字符串拼接等
    const { input1, input2 } = this.state;
    // 举个例子，如果是数值运算记得转类型，避免字符串拼接
    const calculatedResult = `最终结果：${parseInt(input1, 10) + parseInt(input2, 10)}`;
    
    // 只有这一步才更新result state，触发结果渲染
    this.setState({
      result: calculatedResult
    });
  }

  render() {
    const { input1, input2, result } = this.state;
    return (
      <div>
        <input
          type="text"
          value={input1}
          onChange={this.handleInput1Change}
          placeholder="输入内容1"
        />
        <input
          type="text"
          value={input2}
          onChange={this.handleInput2Change}
          placeholder="输入内容2"
        />
        <button onClick={this.handleSubmit}>提交计算</button>
        {/* 只有当result有值时才渲染结果，避免初始状态显示空内容 */}
        {result && <div className="result-container">{result}</div>}
      </div>
    );
  }
}

export default AppComponent2;

关键要点说明： #

• 分离职责：输入框的onChange事件只负责更新对应的输入state，绝不触发结果计算；只有提交按钮的onClick事件才会计算并更新result state。
• 避免this绑定错误：之前你加result state出错，大概率是事件处理函数的this上下文没绑定好——要么在constructor里bind，要么用箭头函数写法的事件处理函数（比如handleSubmit = () => {...}）。
• 条件渲染结果：用{result && ...}的方式，确保只有提交后（result有值）才展示结果，初始状态下不会显示多余内容。

如果之前的错误是其他情况（比如计算逻辑写错），可以对照上面的代码检查：是不是不小心在输入框的change事件里更新了result？或者result的初始化值设置有问题？

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