ReactJS如何将表单输入数据传递至下一个页面/组件

嘿，刚接触React的话，这种跨页面/组件传值的需求其实完全不用搞复杂的外部JSON，用路由传参或者props传递就够简单够好用了！我给你两种具体的实现方案，一步步来：

如果你的项目是用react-router-dom做路由的（React项目基本都会用这个），这个方案最适合：

1. 先确保安装了路由依赖：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 编写表单页面（FormPage.js）：
   这里用useNavigate钩子实现跳转，同时把输入的内容通过路由的state传递过去

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function FormPage() {
  const [inputContent, setInputContent] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 跳转到展示页，带上输入内容
    navigate('/display', { state: { content: inputContent } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputContent}
        onChange={(e) => setInputContent(e.target.value)}
        placeholder="请输入内容..."
      />
      <button type="submit">提交并查看</button>
    </form>
  );
}

export default FormPage;

3. 编写展示页面（DisplayPage.js）：
   用useLocation钩子获取路由传递过来的内容，然后用<p>标签展示

import { useLocation } from 'react-router-dom';

function DisplayPage() {
  const location = useLocation();
  // 用可选链操作符避免未传值时报错
  const showContent = location.state?.content || '没有输入任何内容';

  return (
    <div>
      <h3>你刚才输入的内容是：</h3>
      <p>{showContent}</p>
    </div>
  );
}

export default DisplayPage;

4. 配置路由（App.js）：
   把两个页面注册到路由里

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import FormPage from './FormPage';
import DisplayPage from './DisplayPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<FormPage />} />
        <Route path="/display" element={<DisplayPage />} />
      </Routes>
    </Router>
  );
}

export default App;

小提示：如果刷新展示页，路由state里的内容会丢失，如果需要持久化，可以把内容存在localStorage里，提交时存，展示时取，这个后续你熟悉React后再尝试也没问题～

如果不需要真正的页面跳转，只是在同一个页面里切换表单和展示组件，用这个方案更直接：

1. 父组件（App.js）：
   维护输入内容的状态，以及控制显示哪个组件的状态，把状态作为props传给子组件

import { useState } from 'react';
import FormComponent from './FormComponent';
import DisplayComponent from './DisplayComponent';

function App() {
  const [inputContent, setInputContent] = useState('');
  const [isShowDisplay, setIsShowDisplay] = useState(false);

  // 接收表单组件传来的输入内容，切换到展示组件
  const handleFormSubmit = (content) => {
    setInputContent(content);
    setIsShowDisplay(true);
  };

  return (
    <div>
      {!isShowDisplay ? (
        <FormComponent onSubmit={handleFormSubmit} />
      ) : (
        <DisplayComponent content={inputContent} />
      )}
    </div>
  );
}

export default App;

2. 表单组件（FormComponent.js）：
   把输入内容通过props里的回调函数传给父组件

import { useState } from 'react';

function FormComponent({ onSubmit }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 把输入值传给父组件
    onSubmit(inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="请输入内容..."
      />
      <button type="submit">提交</button>
    </form>
  );
}

export default FormComponent;

3. 展示组件（DisplayComponent.js）：
   直接接收父组件传来的props，用<p>标签展示

function DisplayComponent({ content }) {
  return (
    <div>
      <h3>你输入的内容是：</h3>
      <p>{content}</p>
    </div>
  );
}

export default DisplayComponent;

这两种方案都是React里最基础的传值方式，比存外部JSON简单太多，刚入门的话先从这两个入手，很容易理解和上手～

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