React受控表单提交后刷新整页问题咨询

嘿，我明白你碰到的麻烦了——表单提交后内容刚显示就刷新页面，这确实挺恼人的！其实问题出在HTML表单的默认行为上，不管你用受控组件还是refs，只要你用了<form>标签，点击提交按钮时浏览器都会默认触发页面刷新跳转，和React的state管理没关系。

你完全没必要切换到refs，你用受控组件的思路是对的，只需要在提交事件里阻止这个默认行为就行，具体做法如下：

核心解决方案：阻止表单默认提交行为 #

在你的表单提交处理函数里，调用事件对象的preventDefault()方法，就能彻底阻止页面刷新。

给你一个完整的class组件示例，对照着看就清楚了：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
    // 绑定this（class组件里的常规操作）
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // 受控组件的输入变更处理
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }

  // 表单提交处理——重点在这里！
  handleSubmit(event) {
    // 第一步：阻止默认刷新行为
    event.preventDefault();
    
    // 第二步：执行你原本的逻辑，比如展示state里的内容
    console.log('提交的内容：', this.state.inputValue);
    // 这里可以把内容渲染到页面上，比如更新state或者直接操作DOM（不过受控组件推荐用state）
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          value={this.state.inputValue} 
          onChange={this.handleChange}
        />
        <button type="submit">提交</button>
        {/* 显示提交后的内容 */}
        <p>你输入的内容：{this.state.inputValue}</p>
      </form>
    );
  }
}

为什么不需要用refs？ #

你提到的refs主要用于直接访问DOM元素的场景（比如获取输入框的焦点、读取非受控组件的值），而你现在用受控组件已经把输入值同步到state里了，完全不需要借助refs来解决页面刷新的问题——阻止默认行为才是关键。

总结一下：只要在onSubmit的处理函数里加上event.preventDefault()，就能让表单提交后停留在当前页面，同时保留你原本的state渲染逻辑啦！

内容的提问来源于stack exchange，提问作者Mike Smith Alexiss