React类组件提交表单后跳转页面的实现方法求助

首先先修正你代码里的几个问题，这些问题会导致表单数据处理异常：

• handleChange里的类型判断错误：你用的是select组件，不需要判断target.type === 'type'，直接取target.value即可
• select的value绑定错误：应该绑定对应state字段，比如value={this.state.type}和value={this.state.number}，而不是this.state.value
• 初始state类型不匹配：select选项值是字符串，初始state应该设为空字符串而非布尔值

修正后的基础代码：

import React from 'react';
import axios from 'axios';

class Home extends React.Component {
  constructor(props) {
    super(props);
    // 初始值设为空字符串，匹配select的默认选项
    this.state = { type: "", number: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  async handleSubmit(event) {
    event.preventDefault();
    try {
      await axios.post("http://localhost:5000/number", {
        type: this.state.type,
        number: this.state.number
      });
      // 这里添加跳转逻辑
      this.props.navigate('/your-target-path'); // 替换成你的目标路由
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    return (
      <div className="tabSearch">
        <form onSubmit={this.handleSubmit}>
          <select className="input" value={this.state.type} name="type" onChange={this.handleChange}>
            <option className="first_select" value="">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <select className="input" value={this.state.number} name="number" onChange={this.handleChange}>
            <option className="first_select" value="">number</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="0">0</option>
          </select>
          <input className="button" type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default Home;

接下来解决类组件无法使用<Navigate>组件的问题：

React Router v6的<Navigate>是函数组件专用的，类组件不能直接使用，你可以通过**封装高阶组件(HOC)**把跳转方法注入到类组件的props中：

1. 先创建一个withRouter高阶组件：

import { useNavigate, useLocation, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const WrapperComponent = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return WrapperComponent;
};

2. 修改类组件的导出语句，用这个HOC包裹：

export default withRouter(Home);

3. 在handleSubmit的成功回调里调用跳转方法：

async handleSubmit(event) {
  event.preventDefault();
  try {
    await axios.post("http://localhost:5000/number", {
      type: this.state.type,
      number: this.state.number
    });
    // 跳转到目标页面，替换成你的路由路径
    this.props.navigate('/success-page');
  } catch (error) {
    console.log(error);
  }
}

这样就能在类组件里实现表单提交成功后的页面跳转了。

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