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

使用React将数据从<option>发送到另一个页面和搜索数据库的过程可以分为以下几个步骤：

创建一个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;

创建另一个React组件来接收并展示从<option>发送过来的数据。这个组件可以作为另一个页面的一部分，或者通过路由进行导航。

import React from 'react';

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

export default AnotherPageComponent;

在React的根组件中设置路由，以便在用户提交表单后导航到另一个页面。

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;

在表单提交的处理函数中，可以使用React Router的history对象进行页面导航，并将选择的数据作为URL参数传递给另一个页面。

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

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

在接收数据的另一个页面组件中，可以通过解析URL参数来获取从<option>发送过来的数据。

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;

这样，当用户在表单中选择一个<option>并提交后，React将导航到另一个页面，并将选择的数据作为URL参数传递给该页面。另一个页面组件可以解析URL参数并展示接收到的数据。

注意：以上代码仅为示例，具体实现可能因项目所用的路由库或状态管理库而有所不同。另外，涉及数据库操作的逻辑需要根据具体的后端实现进行调整。