我正在尝试设置 react-select 值而不是为每个 select 元素使用状态 我正在尝试将所有这些值放在一个数组中

Question

当我使用 HTML select 时它有效，但它不适用于 react-select

此外，react-select 选项是我导入的数组，return 一个对象

示例：

  const Program = [
    {
      value: "MSC",
      label: "MSC"
    },
    {
      value: "MCA",
      label: "MCA",
      isdisabled: true // disable this option
    },
    {
      value: "BSC",
      label: "BSC"
    },
    {
      value: "BCA",
      label: "BCA",
      isdisabled: true  // disable this option
    }
  ];

import Select from "react-select";
function Download() {
  const requestSelected = e => {
    e.preventDefault();
    // Axios.post('http://localhost:5000/login', attend)
    // .then(res => {
    //     alert(res.data.message)
    // })
    console.log(selectedValue);
  };

  // set value for default selection
  const [selectedValue, setSelectedValue] = useState({
    Program: "",
    Class: "",
    Division: "",
    Course: "",
    Datefrom: "",
    Datetill: ""
  });

  const handleChange = e => {
    const { name, value } = e.target;
    setSelectedValue({
      ...selectedValue,
      [name]: value
    });
  };

  return (
    <form className="D Download" method="POST">
      <p>Download Form:</p>
      <label className="D_programlabel">Select Program:</label>
      <Select
        name="Program"
        options={Program}
        onChange={handleChange}
        value={selectedValue.Program}
      />
      <label className="D_classlabel">Select Class:</label>
      <Select
        name="Class"
        options={Class}
        onChange={handleChange}
        value={selectedValue.Class}
      />
      <label className="D_divisionlabel">Select Division:</label>
      <Select
        name="Division"
        options={Division}
        onChange={handleChange}
        value={selectedValue.class}
      />
      <label className="D_courselabel">Select Course:</label>
      <Select
        name="Course"
        options={MSCCourses}
        onChange={handleChange}
        value={selectedValue.Course}
      />
      <ul className="date_time-container">
        <li>
          <label>From Date :</label>
          <input
            type="date"
            name="Datefrom"
            placeholder="Enter Date"
            onChange={handleChange}
            value={selectedValue.Datefrom}
          />
        </li>
        <li>
          <label>Till Date :</label>
          <input
            type="date"
            name="Datetill"
            placeholder="Enter Time"
            onChange={handleChange}
            value={selectedValue.Datetill}
          />
        </li>
      </ul>
      <br />
      <ul className="browse_upload-container">
        <li>
          <label>File :</label>
          <input type="file" className="upload" accept=".csv" required></input>
          <button type="submit" id="submit-file" class="btn btn-primary">
            Download File
          </button>
        </li>
        <li>
          <input type="submit" value="Submit" onClick={requestSelected} />
        </li>
      </ul>
    </form>
  );
}

export default Download;

Answer 1

onChange return options 的一项，所以在调用 handleChange:

时要加上 name

const handleChange = (name, value) => {
    setSelectedValue({
        ...selectedValue,
        [name]: value
    })
}

onChange={(value) => handleChange("Program", value)}