React类组件：如何通过按钮修改state并实时显示新值？

你的代码问题主要有两个：

1. 按钮为submit类型，点击后触发表单默认提交行为，页面刷新导致state被重置，所以div无法显示新值。
2. 直接通过document.getElementById获取输入值不符合React的状态管理模式。

方案一：使用受控组件（推荐） #

通过state驱动输入框的值，统一管理数据流：

class Appp extends Component {
  constructor() {
    super();
    this.state = {
      name: "super man",
      inputValue: "super man"
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      name: this.state.inputValue
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <span>Name : </span>
          <input 
            type="text" 
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button type="submit">Click Me</button>
        </form>
        <div>{this.state.name}</div>
      </div>
    );
  }
}

方案二：阻止表单默认行为（快速修复，不推荐） #

如果不想改动太多，只需在handleSubmit中阻止表单默认提交行为：

handleSubmit(e) {
  e.preventDefault(); // 阻止页面刷新
  this.setState(state => ({
    name: document.getElementById('id').value
  }));
}

关键修改说明 #

• 调用e.preventDefault()：彻底解决表单提交导致的页面刷新问题，让state更新后能保留在页面中。
• 受控组件模式：输入框的值由state控制，通过onChange实时同步输入内容到state，避免直接操作DOM，符合React数据驱动视图的设计理念。

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