如何從 reactjs 中的 select2 獲取值

Question

我正在使用 adminlte HTML 主題，我將這個主題轉換為 reactjs，除了 select2（多選）之外一切正常

onselect 我正在嘗試觸發 userIdHandler 的處理程序，但它不會觸發

有兩種情況：

1. 多選用戶名：userIdHandler 不工作
2. 單個 select 的狀態：userIdHandler 正在工作

請幫助我也從多選中觸發 userIdHandler

import React, { useEffect, useState } from "react";
import { getTeam } from "../services/ApiCall/attendanceApiCall";

export default function TeamattendanceComponent() {
  const [team, setTeam] = useState([]);

  const userIdHandler = (e) => {
    console.log("hi", e.target.value);
  };

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "myjs/content.js";
    script.async = true;
    document.body.appendChild(script);

    getTeam().then((res) => {
      console.log(res.data);
      setTeam(res.data);
    });
  }, []);
  return (
    <div className="content-wrapper">
      {/* Content Header (Page header) */}
      <div className="card">
        <div className="card-body row">
          <div className="col-4">
            <div className="form-group ">
              <label>User Name</label>
              
              <select
                id
                className="form-control select2"
                multiple="multiple"
                data-placeholder="Select a State"
                style={{ width: "100%" }}
                onChange={userIdHandler}
              >
                {team.map((user, key) => {
                  console.log("team data", team);
                  return (
                    <option key={key} value={user._id}>
                      {user.name}
                    </option>
                  );
                })}
              </select>
            </div>
          </div>

          <div className="col-4">
            <div className="form-group">
              <label>Status</label>
              <select id className="form-control" onChange={userIdHandler}>
                <option>Select</option>
                <option>ON</option>
                <option>OFF</option>
              </select>
            </div>
          </div>

          <div className="col-4">
            <div className="form-group">
              <label className="hidden-xs">&nbsp;</label>
              <input
                type="submit"
                className="btn btn-primary form-control"
                defaultValue="Filter"
              />
            </div>
          </div>
        </div>
      </div>
      {/* /.content */}
    </div>
  );
}

Answer 1

恐怕您沒有使用常規 select 的Select2元素。

首先安裝react-select : npm i --save react-select

這是在 Select2 上定義多選的方式：

import Select from 'react-select';

const options = [{label: "option 1", value: 1}, {label: "option 2", value: 2}];

<Select
    isMulti
    options={options}
    onChange={userIdHandler}
  />

然后將您的 userIdHandler` function 更改為：

const userIdHandler = (value) => {
    console.log(value);
  };

這樣它應該會打印出label和所選的value 。