如何从 ReactJS 的下拉菜单中检索选定的值

Question

我正在尝试从两个下拉菜单 (DDM) 的选定项目中获取值。第一个 DDM 将根据用户输入填充第二个 DDM。例如。第一个 DDM 选择“语言”，第二个 DDM 将只显示“c++、java、python、c#”。我很难从两个下拉菜单中检索值作为字符串？有什么建议 ？非常感谢。

当前代码

  /** 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) => <option key={el}>{el}</option>);
  }
  return (
    <div>
      <form>
        <div>
          {/** Bind changeSelectOptionHandler to onChange method of select.
           * This method will trigger every time different
           * option is selected.
           */}
          <select onChange={changeSelectOptionHandler}>
            <option>Choose...</option>
            <option>Algorithm</option>
            <option>Language</option>
            <option>Data Structure</option>
          </select>
        </div>
        <div>
          <select>
            {
              options
            }
          </select>
        </div>
      </form>
    </div>
  );
};
  
export default App;

Answer 1

试试这个方法，

    import { useEffect, useState } from "react";

export default function App() {
  const [selected, setSelected] = useState("");
  const [type, setType] = useState([]);
  const [selected2, setSelected2] = useState("");

  const algorithm = [
    "Searching Algorithm",
    "Sorting Algorithm",
    "Graph Algorithm"
  ];
  const language = ["C++", "Java", "Python", "C#"];
  const dataStructure = ["Arrays", "LinkedList", "Stack", "Queue"];

  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
  };

  const changeDp2Handle = (event) => {
    setSelected2(event.target.value);
  };

  useEffect(() => {
    let type = [];
    if (selected === "Algorithm") {
      type = algorithm;
    } else if (selected === "Language") {
      type = language;
    } else if (selected === "Data Structure") {
      type = dataStructure;
    }
    setSelected2("");
    setType(type);
  }, [selected]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <select onChange={changeSelectOptionHandler}>
          <option>Choose...</option>
          <option>Algorithm</option>
          <option>Language</option>
          <option>Data Structure</option>
        </select>
      </div>
      <hr />
      <div>
        <select onChange={changeDp2Handle}>
          <option>Choose...</option>
          {type.map((v) => (
            <option key={v}>{v}</option>
          ))}
        </select>
        {selected2}
      </div>
    </div>
  );
}

codesandbox - https://codesandbox.io/s/jovial-resonance-joqlo?file=/src/App.js:0-1208

Answer 2

我建议这样做

import { useState } from "react";
import "./styles.css";

const Select = ({ options, fieldName }) => {
  const [value, setValue] = useState();

  return (
    <select
      name={fieldName}
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    >
      {options.map(({ value, label }, i) => {
        return (
          <option key={i} value={value}>
            {label}
          </option>
        );
      })}
    </select>
  );
};

const dataStructureOptions = [
  {
    label: "Arrays",
    value: "Arrays"
  },
  {
    label: "LinkedList",
    value: "LinkedList"
  },
  {
    label: "Stack",
    value: "Stack"
  },
  {
    label: "Queue",
    value: "Queue"
  }
];

const languageOptions = [
  {
    label: "C++",
    value: "C++"
  },
  {
    label: "Java",
    value: "Java"
  },
  {
    label: "Python",
    value: "Python"
  },
  {
    label: "C#",
    value: "C#"
  }
];

const filterOptions = [
  {
    label: "Choose...",
    value: "Choose..."
  },
  {
    label: "Algorithm",
    value: "Algorithm"
  },
  {
    label: "Language",
    value: "Language"
  },
  {
    label: "Data Structure",
    value: "Data Structure"
  }
];

const mappedSelectedOptions = {
  Language: languageOptions,
  "Data Structure": dataStructureOptions
};

const FILTER_FIELD_NAME = "filter";

export default function App() {
  const [currentSelectedFilter, setCurrentSelectedFilter] = useState();

  const onFormChange = (e) => {
    const fieldName = e.target.name;

    if (fieldName === FILTER_FIELD_NAME) {
      setCurrentSelectedFilter(e.target.value);
    }
  };

  const onSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    console.log("onSubmit", formData);
  };

  const currentMappedOptions = mappedSelectedOptions[currentSelectedFilter];

  return (
    <div>
      <form onChange={onFormChange} onSubmit={onSubmit}>
        <Select options={filterOptions} fieldName={FILTER_FIELD_NAME} />

        {currentMappedOptions && (
          <Select options={currentMappedOptions} fieldName="options" />
        )}

        <button>Submit</button>
      </form>
    </div>
  );
}