如何在单一状态下处理多个选择框

Question

我的初始状态

const [state,setState] = useState({
country : "",
nationality : "",
})

我的第一个选择标签：

<select> //select for country
<option>Nepal<option/>
<option>USA<option/>
</select>

我的第二个选择标签：

<select> //select for nationality 
<option>Nepali<option/>
<option>Ameracain<option/>
</select>

最后，我需要两个选择标签的所有选定值都处于单一状态。

const [state,setState] = useState({
    country : "Nepal",
    nationality : "Nepali",
    })

Answer 1

here is a sample based on your example

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

export default function App() {
  const [state, setState] = useState({
    country: "Nepal",
    nationality: "Nepali"
  });
  const handleChange = (e) => {
    const copy = { ...state };
    switch (e.target.name) {
      case "country":
        copy.country = e.target.value;
        break;
      case "nationality":
        copy.nationality = e.target.value;
        break;
      default:
        break;
    }
    setState(copy);
  };
  return (
    <div className="App">
      <select name="country" onChange={handleChange}>
        //select for country
        <option>Nepal</option>
        <option>USA</option>
      </select>
      My second select tag :
      <select name="nationality" onChange={handleChange}>
        //select for nationality
        <option>Nepali</option>
        <option>Ameracain</option>
      </select>
      {JSON.stringify(state)}
    </div>
  );
}