如何使用 React 根据另一个下拉菜单更改选择的选项？

在React中，我们可以使用state来存储下拉菜单的值，并使用onChange事件来监听其值的变化。当一个下拉菜单的值变化时，我们可以根据它的值来动态更新另一个下拉菜单的选项。下面是一个简单的例子：

import React, { useState } from 'react';

const options1 = ['Option 1', 'Option 2', 'Option 3'];
const options2 = [['Option 1-1', 'Option 1-2'], ['Option 2-1', 'Option 2-2'], ['Option 3-1', 'Option 3-2']];

function App() {
  const [selectedOption1, setSelectedOption1] = useState(options1[0]);
  const [selectedOption2, setSelectedOption2] = useState(options2[0][0]);

  const handleOption1Change = (event) => {
    setSelectedOption1(event.target.value);
    setSelectedOption2(options2[options1.indexOf(event.target.value)][0]);
  }

  const handleOption2Change = (event) => {
    setSelectedOption2(event.target.value);
  }

  return (
    <div>
      <h1>Dropdown Menu Example</h1>
      <label>
        Option 1:
        <select value={selectedOption1} onChange={handleOption1Change}>
          {options1.map((option) => (
            <option key={option} value={option}>{option}</option>
          ))}
        </select>
      </label>
      <br />
      <label>
        Option 2:
        <select value={selectedOption2} onChange={handleOption2Change}>
          {options2[options1.indexOf(selectedOption1)].map((option) => (
            <option key={option} value={option}>{option}</option>
          ))}
        </select>
      </label>
    </div>
  );
}

export default App;

在上面的例子中，我们有两个下拉菜单：第一个菜单显示options1数组的选项，第二个菜单显示根据第一个菜单的选项动态生成的options2数组的选项。我们使用useState hooks来存储每个下拉菜单的选项，并使用onChange事件来监听其值的变化。当第一个下拉菜单的值变化时，我们使用indexOf方法来找到该值在options1数组中的位置，并使用该位置来获取options2中对应的数组。然后我们使用该数组的第一个值来更新第二个下拉菜单的选项。

在上面的例子中，我们还使用了map方法来动态生成下拉菜单的选项。请注意，我们为每个选项使用一个唯一的key属性。这是React中的一个最佳实践，因为它可以帮助React识别哪个元素需要更新。

以上就是一个简单的React下拉菜单例子，可以根据另一个菜单中的选项动态更新选项。如果您需要更多的帮助，请查阅React官方文档和教程。