javascript - 如何使用 Laravel 和 React.js 获取表单中外键的下拉列表

Question

在我的 Laravel 项目中，我有 2 个表，分别是 custdetails 表和 customer 表。

这是我使用的客户表的代码，

    Schema::create('customers', function (Blueprint $table) {
        $table->id('cust_id');
        $table->string('fname');
        $table->string('lname');
        $table->string('email');
        $table->string('password');
        $table->timestamps();
    });

我使用的 CustDetails 表（使用外键 - cust_id）

   Schema::create('cust_details', function (Blueprint $table) {
        $table->id('custdetail_id');
        $table->string('address');
        $table->string('street');
        $table->string('city');
        $table->string('postalCode');
        $table->string('ContactNo');
        $table->foreignId('cust_id')->nullable()->constrained('customers');
        $table->timestamps();
    });

所以我正在尝试使用名称客户反应获取信息。这里是 react 中 addcustDetails.js 的代码，

    import Header from './Header'
    import { useState,useEffect } from 'react'

    function AddCustDetails() 
    {
     const [address, setAddress] = useState("");
     const [street, setStreet] = useState("");
     const [city, setCity] = useState("");
     const [postalCode, setPostalCode] = useState("");
     const [ContactNo, setContactNo] = useState("");
     const [cust_id, setCust_id] = useState("");

     async function addCustDetails() {
       console.warn(address, street, city, postalCode, ContactNo, cust_id)
       const formData = new FormData();
       formData.append('address', address);
       formData.append('street', street);
       formData.append('city', city);
       formData.append('postalCode', postalCode);
       formData.append('ContactNo', ContactNo);
       formData.append('cust_id', cust_id);

     let result = await fetch("http://localhost:8000/api/addCustDetails", {
        method: 'POST',
        body: formData
     });
     alert("Data has been saved")
   }
   return (
    <div>
        <Header />
                <div className="col-sm-6 offset-sm-3">
                    <h1>Add Cust Details</h1><br />
                    <input type="text" className="form-control" placeholder="Address" onChange={(e) 
                    => setAddress(e.target.value)} /><br />
                    <input type="text" className="form-control" placeholder="Street" onChange={(e) => 
                   setStreet(e.target.value)} /><br />
                    <input type="text" className="form-control" placeholder="City" onChange={(e) =>  
                     setCity(e.target.value)} /><br />
                    <input type="text" className="form-control" placeholder="Postal Code" onChange= 
                    {(e) => setPostalCode(e.target.value)} /><br />
                    <input type="text" className="form-control" placeholder="Contact No" onChange= 
                     {(e) => setContactNo(e.target.value)} /><br />
                    <select name="cust_id">
                        <option value=""> {} </option>
                    </select><br/>
                    <button onClick={addCustDetails} className="btn btn-primary">Add Customer 
                     Details</button>
                </div>       
         </div>
     )
    }
    export default AddCustDetails

我需要在下拉列表中获取 cust_id 和 cust_name，并且只需要在数据库的 custdetails 表中保存 cust_id

我将不胜感激任何类型的想法或帮助以获取客户的姓名和 ID。

标签： javascriptreactjslaravelapi