React组件状态无法更新：点击登录提交后路由状态未改变

我在React应用中尝试点击SignIn组件的提交按钮来改变路由状态，已将onRouteChange函数作为props传递给SignIn组件，但点击后路由状态并未改变，怀疑函数未成功传递。相关代码如下：

App组件代码 #

class App extends Component {
  constructor() {
    super();
    this.state = { route: "signed-out" };
  }
  onRouteChange = () => {
    this.setState({ route: "home" });
  };
  render() {
    return (
      <div class='main'>
        {this.state.route === "signed-out" ? (
          <div>
            <SignIn onRouteChange={this.onRouteChange}/>
          </div>
        ) : (
          <div>
            <SignOut  />
          </div>
        )}
      </div>
    );
  }
}

SignIn组件代码 #

const SignIn = ({ onRouteChange }) => {
  return (
    <div>
      <form>
        <div>Sign In</div>
        <div>Email</div>
        <input type='email' />
        <div>Password</div>
        <input type='password' />
        <input onClick={onRouteChange} type='submit' />
      </form>
    </div>
  );
};

问题原因与解决方案 #

函数传递本身是正常的，问题出在submit按钮的默认表单提交行为：点击submit会触发表单默认提交，导致页面刷新，React组件重新初始化，路由状态被重置回初始值。

解决方法一：在按钮点击事件中阻止默认行为 #

修改SignIn组件的submit按钮点击事件，先阻止表单默认提交，再执行状态修改：

<input 
  onClick={(e) => {
    e.preventDefault(); // 阻止表单默认提交
    onRouteChange();
  }} 
  type='submit' 
/>

解决方法二：给表单添加onSubmit事件（更规范） #

直接在form标签上绑定onSubmit事件，统一处理默认行为和状态修改：

const SignIn = ({ onRouteChange }) => {
  return (
    <div>
      <form onSubmit={(e) => {
        e.preventDefault();
        onRouteChange();
      }}>
        <div>Sign In</div>
        <div>Email</div>
        <input type='email' />
        <div>Password</div>
        <input type='password' />
        <input type='submit' /> {/* 无需再绑定onClick */}
      </form>
    </div>
  );
};

这样处理后，表单不会刷新页面，onRouteChange修改的路由状态就能正常生效。

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