当我们在 React JS 中提交表单时如何将表单重定向到另一个页面 - JavaScript

在 React JS 中，我们可以使用 react-router-dom 来实现将表单重定向到另一个页面。下面是一个简单的例子：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function Form() {
  const [formData, setFormData] = useState({});
  const history = useHistory();

  const handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单数据
    // ...

    // 重定向到另一个页面
    history.push('/redirectTo');
  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="inputField">Input field:</label>
      <input type="text" id="inputField" name="inputFieldName" onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

首先，我们需要导入 useHistory 钩子，它允许我们访问浏览器的历史记录，并允许我们在 React 中进行跳转。

然后，在表单的 handleSubmit 函数中，我们可以使用 history.push 方法来将表单重定向到指定的页面。在这里，我们将其设置为 /redirectTo，但可以根据需要更改它。

最后，在表单中，我们需要将 handleSubmit 函数传递给 onSubmit 属性，以便在表单提交时触发重定向操作。

总之，useHistory 是在 React JS 中将表单重定向到另一个页面的最佳方式。它简单易用，同时又提供了强大的功能。