如何使用React将数据从<option>发送到另一个页面和搜索数据库

import React, { useState } from 'react';

function FormComponent() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 发送数据到另一个页面或搜索数据库的逻辑处理
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        选择数据：
        <select value={selectedOption} onChange={handleOptionChange}>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default FormComponent;

import React from 'react';

function AnotherPageComponent(props) {
  return (
    <div>
      <h2>接收到的数据：</h2>
      <p>{props.selectedOption}</p>
    </div>
  );
}

export default AnotherPageComponent;

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import FormComponent from './FormComponent';
import AnotherPageComponent from './AnotherPageComponent';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <FormComponent />
        </Route>
        <Route path="/anotherpage">
          <AnotherPageComponent />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

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

const handleSubmit = (event) => {
  event.preventDefault();
  // 发送数据到另一个页面或搜索数据库的逻辑处理
  history.push(`/anotherpage?data=${selectedOption}`);
};

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

function AnotherPageComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const selectedOption = queryParams.get('data');

  return (
    <div>
      <h2>接收到的数据：</h2>
      <p>{selectedOption}</p>
    </div>
  );
}

export default AnotherPageComponent;