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

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

在 HTML 中选择允许我们使用下拉菜单在多个值中进行选择。在这里，我们正在讨论基于另一个下拉列表更改选择选项。在 React 中，借助状态很容易实现。对于那些不了解这里的状态的人来说，这是一个简短的说明。

组件的状态是一个对象，它包含一些可能在组件的生命周期内发生变化的信息。

如果您想了解更多关于state 的信息，请参阅 react geeksforgeeks 中的 state 和 state 和生命周期 reactjs.org。

React 既有基于类的组件，也有函数式组件，所以在本文中，我们将使用函数式组件。在 Functional 组件中，可以使用 useState 钩子来管理状态。

我们想根据其他下拉菜单更改选择选项，因此我们将按照以下步骤操作。

1. 创建一个初始为null 或未定义的状态变量。
2. 为不同的下拉菜单创建不同的数组。
3. 创建一个局部变量say type ，它将根据所选的下拉列表保存任何数组。
4. 创建一个函数，只要选择下拉列表中的选项，就会调用该函数，该函数将更改状态变量，以便可以动态确定类型的值。
5. 最后，使用类型变量来创建用户将看到的一组不同的选项。

现在我们将使用上述所有步骤创建一个组件。

App.js：下面是App.js组件的代码。

Javascript

import * as React from "react";
  
const App = () => {
  /** "selected" here is state variable which will hold the
   * value of currently selected dropdown.
   */
  const [selected, setSelected] = React.useState("");
  
  /** Function that will set different values to state variable
   * based on which dropdown is selected
   */
  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
  };
  
  /** Different arrays for different dropdowns */
  const algorithm = [
    "Searching Algorithm",
    "Sorting Algorithm",
    "Graph Algorithm",
  ];
  const language = ["C++", "Java", "Python", "C#"];
  const dataStructure = ["Arrays", "LinkedList", "Stack", "Queue"];
  
  /** Type variable to store different array for different dropdown */
  let type = null;
  
  /** This will be used to create set of options that user will see */
  let options = null;
  
  /** Setting Type variable according to dropdown */
  if (selected === "Algorithm") {
    type = algorithm;
  } else if (selected === "Language") {
    type = language;
  } else if (selected === "Data Structure") {
    type = dataStructure;
  }
  
  /** If "Type" is null or undefined then options will be null,
   * otherwise it will create a options iterable based on our array
   */
  if (type) {
    options = type.map((el) => {el});
  }
  return (
    

      

        

          {/** Bind changeSelectOptionHandler to onChange method of select.
           * This method will trigger every time different
           * option is selected.
           */}
          
            Choose...
            Algorithm
            Language
            Data Structure
          
        
        

          
            {
              /** This is where we have used our options variable */
              options
            }
          
        
      
    
  );
};
  
export default App;

输出：

注意：您也可以使用基于类的组件，逻辑相同。