ReactJS<form> onSubmit 转发到新的组件和页面

Question

我可能会误解 React，在这种情况下，我欢迎重新构建我的网站的建议。

我想要的行为是在提交SimulationForm ，用户被转发到另一个名为SimulationResults组件。 这将需要一个用于发送数据库查询的id 。

当前的行为是模拟在提交后根本不转发，停留在同一页面上。

理想情况下，以便用户可以在将来轻松返回结果我希望模拟id可以作为 url 路径参数传递给结果页面，而不是再次通过提交表单。

我有一个看起来像这样的index.js ：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import SimulationForm from './simulation_form'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<SimulationForm />, document.getElementById('root'));

serviceWorker.unregister();

和simulation_form.js像这样：

import React from 'react';

export default class SimulationForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      simulationName: "",
      ...
      ...
    };

   this.handleSubmit = this.handleSubmit.bind(this);
   ...
  }
...
...
   handleSubmit(event) {
     event.preventDefault();

     ...
     ...
   }
...
...
return(
      <form id="simulationForm" className="centered" onSubmit={this.handleSubmit}>
        <label>Simulation name:</label>
        <input type="text" placeholder="enter name here" name="simulationName" value={this.state.simulationName} onChange={this.handleChange} />
...
...
    );
  }
}

在我尝试过的handleSubmit函数的末尾：

return <SimulationResults />;

和

ReactDOM.render(<SimulationResults />, document.getElementById('root'));

没有成功。 很明显我不明白 React 希望我如何设置它。 我一直在阅读文档和网络，但找不到我想要实现的任何示例。 我也不确定如何将状态（一个id字符串）从表单组件传递给结果组件。

simualation_results.js ：

import React from 'react';

export default class SimulationResults extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      simId: ""
    }
  }
...
...
render() {
    return <form id="simulationResults" className="centered" onSubmit={this.queryDatabase}>
      <input type="text" placeholder="enter simId" name="simId" value={this.state.simId} onChange={this.handleChange}  />
      <input type="submit" value="Submit" />
    </form>
  }

Answer 1

@i.brod 为我指明了react-router的方向，以实现我想要的。

1. npm install react-router-dom
2. 然后我在index.js添加了一个<Router> ：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

ReactDOM.render(<Index />, document.getElementById('root'));

export default function Index() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <SimulationForm />
          </Route>
          <Route path="/results/:id?">
            <Results />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

path="/results/:id?" 匹配/results以及/results/{anything} 。

3. 我使我的 SimulationResults 组件成为一个函数而不是一个独立的组件。

function Results() {
  let { id } = useParams();

  queryDatabase(id);

  return (
    <div className="centered" >
      <h3 id="results-header">waiting...</h3>
      <form id="simulationResults" onSubmit={(e) => {e.preventDefault(); queryDatabase(document.getElementById("simHash").value);}}>
        <input id="simHash" type="text" placeholder="enter simHash" />
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

SimulationForm 仍然是一个组件：

export default class SimulationForm extends React.Component {
...
}

4. 要在表单的 onSubmit 末尾从/重定向到/results:id我添加了：

window.location.href = '/results/' + id