React Select 组件点击切换数据示例

假设你有一个 Select 组件和一些数据，你可以在点击 Select 时切换它所显示的数据。以下是一个示例代码：

import React, { useState } from 'react';

const data1 = ['Apple', 'Banana', 'Cherry'];
const data2 = ['Elephant', 'Fox', 'Giraffe'];

function App() {
  const [selectedData, setSelectedData] = useState(data1);

  const handleSelectChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedData(selectedValue === 'data1' ? data1 : data2);
  };

  return (
    <div>
      <select onChange={handleSelectChange}>
        <option value="data1">Data 1</option>
        <option value="data2">Data 2</option>
      </select>
      <ul>
        {selectedData.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在这个示例中，我们使用 useState 钩子来跟踪选择的数据。初始数据是 data1。当用户点击选择框并选择“Data 2”时，我们将 selectedData 更新为 data2。最后，在渲染时，我们将 selectedData 映射到一个 li 列表中。