如何處理“react-select”Select 元素的數組屬性的 OnChange？

Question

如何處理 Onchange 僅將 e.value 設置為“prodId”。

我想使用“react-select”的 Select 元素為 object 數組的屬性“prodId”設置 onChange

我知道它在 e.value 中具有價值，但不知道如何在 object 數組中執行。

或者我可以單獨創建“prodId”usestate 數組變量，然后在 select 值將其推送到“Product_Details”數組之后。

請幫忙！

我有這樣的 Object 數組：-

  const [Product_Details, setProduct_Details] = useState([]);

useEffect(() => {
    if (BillIdFetch === undefined) return;
    setProduct_Details([
      {
        index: Math.random(),
        billId: BillIdFetch,

//I want to handle OnChange for this property on react-select.
        prodId: "",
        price: "",
        prod_SrNo: "",
        discount: "0",
        Qty : "1",
        Prod_Status: "NULL",
        proData_warranty_In_Prcnt: "NULL",
        Credit_Note: "NULL",
        Replacement: "NULL",
       
      },
    ]);
  }, [BillIdFetch]);

我為觸發的句柄輸入 onchange 事件創建了句柄輸入 function，但在此我無法設置“prodId”的值，因為它采用 e.value。

處理輸入（） ： -

const handleProductDetailsInputs = (index, e) => {

    const Pdetails = [...Product_Details];
    Pdetails[index][e.target.name] = e.target.value;

    setProduct_Details(Pdetails);
  
  };

返回 （）

 return (
    <>
                  <tr key={val.index}>
                                <td>

                                <Select
                                    key={val.id}
                                    required
                                    class="form-select"
                                    id={prodId}
                                    data-id={idx}
                                    name="prodId"
                                    onChange={(e) => handleProductDetailsInputs(idx, e)}
                                    options={Select_Product_Options}
                                />

                                </td>
                   </tr>
<>)

Answer 1

我沒有完全理解你的問題。 但是，如果您嘗試從從 API 獲取的數據中進行選擇，那么這就是我使用“react-select”package 所做的事情：

  const [selectedOption, setSelectedOption] = useState(null)
  const [clientsData, setClientsData] = useState([]) // coming from api

  const clientIdOptions = clientsData.map((row) => {
    return { value: row.id, label: row.lead_name }
  })

  return (
    <Select isSearchable defaultValue={selectedOption} onChange={setSelectedOption} options={clientIdOptions} />
  )