javascript - 反应Js | 仅显示 URL 中的选定值

Question

我是 reatJS 的新手。有天才可以帮我解决我的问题吗？我正在开发一个电子药房网站，让用户首先选择一个首选地区，然后从该地区选择一家药房。我列出了所有地区以及一个显示该地区所有药房的下拉菜单。然后用户可以向选定的药房下订单。当用户发布订单时，我通过 URL 传递选定的药房 ID。

如果我有 3 个区，并且我从第三个区选择了一家药店，那么 URL 将如下所示：

http://localhost:3000/uploadlist?phmcy=&phmcy=&phmcy=1（这里选择的药房的id是“1”）

URL 还显示所有未选择的值。我的偏好是仅显示所选药房的 ID。我只想显示选定的值。像这样：

http://localhost:3000/uploadlist?phmcy=1

这是我的代码：

区组件：（客户可以选择区）

import React,{ Component } from 'react';
//import { Router } from 'react-router-dom/cjs/react-router-dom.min';
import { Link, withRouter } from "react-router-dom";
import './district.css';
import Upload from "./upload.component";
import Districtpharmacy from "./districtpharmacy.component";
class District extends React.Component{
    state = {
        pharmacy: []
      };
    
    render(){
        return(

            <div className="container">

                <div className="container district">
                <form action="/uploadlist" method="get">
                    <div className="row">
                        <div className="container header">
                        <h1>Select your District and Nearby Pharmacy</h1>
                        <p>Please select only one pharmacy</p>
                        </div>                 
                    </div>
                    
                <div className="row">
               <div className="form-column">
                <Districtpharmacy district="Mathara"/>
                <Districtpharmacy district="Galle"/>
                <Districtpharmacy district="Hambantota"/>
                <Districtpharmacy district="Kalutara"/>
                <Districtpharmacy district="Colombo"/>
                <Districtpharmacy district="Gampaha"/>
                <Districtpharmacy district="Rathnapura"/>
                <Districtpharmacy district="Kurunegala"/>
                </div>
            
                <div className="form-column">
                <Districtpharmacy district="Monaragala"/>
                <Districtpharmacy district="Anuradhapura"/>
                <Districtpharmacy district="Polonnaruwa"/>
                <Districtpharmacy district="Kandy"/>
                <Districtpharmacy district="Nuwara Eliya"/>
                <Districtpharmacy district="Kegalla"/>
                <Districtpharmacy district="Matale"/>
                <Districtpharmacy district="Badulla"/>
                <Districtpharmacy district="Ampara"/>
                </div>
               
                <div className="form-column">
                <Districtpharmacy district="Puttalam"/>
                <Districtpharmacy district="Trincomalee"/>
                <Districtpharmacy district="Batticaloa"/>
                <Districtpharmacy district="Mannar"/>
                <Districtpharmacy district="Vavuniya"/>
                <Districtpharmacy district="Mulaitivu"/>
                <Districtpharmacy district="Kilinochchi"/>
                <Districtpharmacy district="Jaffna"/>
                </div>
                </div>

                    <br/>
                    <button type="submit" >Add</button>
                    </form>
                </div>

            </div> 

        
        );
    }
}

export default withRouter(District);

District.pharmacy 组件：（返回下拉菜单的位置。）

import React,{ Component } from 'react';
//import { Router } from 'react-router-dom/cjs/react-router-dom.min';
import { Link } from "react-router-dom";
import './district.css';
//import Upload from "./upload.component";
class Districtpharmacy extends React.Component{
    state = {
        pharmacy: [],
        District: this.props.district
      };
      
        componentDidMount() {
          console.log(this.state)
          fetch("https://localhost:44357/api/Pharmacies?field=district&value="+this.props.district)
            .then(response => response.json())
            .then(pharmacy => this.setState({pharmacy: pharmacy}));
            //console.log(this.state)
        }      

render(){
   //console.log(this.state)
    const pharm=this.state.pharmacy.map((pharmacies) =>{
    return(<option value ={pharmacies.id}>{pharmacies.pharmacyname},{pharmacies.address}</option>)})
    return(
        <div>
        <label class="label" for="district"><span>{this.props.district}</span></label>
        <select name="phmcy" className="form-control select-dropdown"><option value="">Select Pharmacy</option>{pharm}</select>
        </div>
    )
}
}
export default Districtpharmacy

有人可以帮我弄这个吗？

编辑：

订单过帐表格：

父文件：（uploadlist.js）（“phmcy”值是从url中获取的。这个文件是在选择药房后触发的）

export default function Uploadlist() {
    let myphmcy = (new URLSearchParams(window.location.search)).get("phmcy")
    
    console.log(myphmcy);


    const ordersAPI= (url='https://localhost:44357/api/Orders') => {
        return {
            fetchAll: () => axios.get(url),
            create: newRecord => axios.post(url, newRecord),
            update: (id, updateRecord) => axios.put(url + id, updateRecord),
            delete: id => axios.delete(url+id)
        }
    }
 
    const addOrEdit = (formData, onSuccess) => {

        ordersAPI().create(formData)
        .then(res => {
            onSuccess();
        })
        .catch(err => console.log(err.response.data))
    }

    return (
        <div className="row">
            <div className="jumbotron jumbotron-fluid py-4 "></div>
            <div className="container text">
                <h1 className="display-4"> Order Register</h1>
            </div>
            <div className="col-md-4 offset-3">
                <Upload //this is the child component where the order form is built.
                    addOrEdit = {addOrEdit}
                    myphmcy = {myphmcy}
                />
                </div> 
                <div className="col-md-1">
                    <div> </div>
                </div>
            
        </div>
    )
}

子文件：

const initialFieldValues ={
    orderID:0, 
    date_time:'',
    status:'',
    status2:'',
    pharmacyName:'',
    customerName:'',
    patientName:'',
    patientAge:'',
    address:'',
    email:'',
    teleNo:'',
    customer_id:1,
    pharmacy_id:0,//data obtaind from the URL have to posted as the pharmacyID when posting. 
    image:'',
    imageSource:'',
    imageData: null
    
}


export default function Upload(props) {

    const {addOrEdit} = props

    const {myphmcy} = props
     console.log(myphmcy);
    const [values, setValues] = useState(initialFieldValues)
    const[errors, setErrors] = useState({})

    const handleInputChange= e => {
        const {name, value} = e.target;
        setValues({
            ...values,
            [name]:value
        })
        
    }

    /*const addOrEdit = (formData, onSuccess) => {

        ordersAPI().create(formData)
        .then(res => {
            onSuccess();
        })
        .catch(err => console.log(err.response.data))
    }*/

    const showPreview = e => {
        if(e.target.files && e.target.files[0]){
            let imageData = e.target.files[0];
            const reader = new FileReader();
            reader.onload = x => {
                setValues({
                    ...values,
                    imageData,
                    imageSource : x.target.result
                    
                })
                
            }
            reader.readAsDataURL(imageData)
        }

        else{
            setValues({
                ...values,
                imageData:null,
                imageSource:''
            })
        }

    }

    const validate = () => {
        let temp = {}
        temp.customerName = values.customerName == "" ? false : true;
        setErrors(temp)
        return Object.values(temp).every(x => x == true)
    }

    const resetForm = () => {
        setValues(initialFieldValues)
        document.getElementById('image-uploader').value = null;
    }

    const handleFormSubmit = e => {
        e.preventDefault()
        if (validate()){
        
        const formData = new FormData()
        
        formData.append('orderID',values.orderID)
        formData.append('date_time',values.date_time)
        formData.append('status',values.status)
        formData.append('status2',values.status2)
        formData.append('pharmacyName',values.pharmacyName)
        formData.append('customerName',values.customerName)
        formData.append('patientName',values.patientName)
        formData.append('patientAge',values.patientAge)
        formData.append('address',values.address)
        formData.append('email',values.email)
        formData.append('teleNo',values.teleNo)
        formData.append('customer_id',values.customer_id)
        formData.append('pharmacy_id',myphmcy)
        formData.append('image',values.image)
        formData.append('imageData',values.ImageData)
        addOrEdit(formData, resetForm) 

        alert("Your file is being uploaded!")
    }
}

const applyErrorClass = field => ((field in errors && errors[field] == false) ? ' invalid-field' : '')


    

    return (
        <>
        <div className="container text-center ">
            <p className="lead"></p>
        </div>
        <form autoComplete="off" noValidate onSubmit={handleFormSubmit}>
            <div className="card">
                <div className="card-header text-center">Place Your Order Here</div>
            
            <img src={values.imageSource} className="card-img-top"/>

                <div className="card-body">

                    <div className="form-group">
                        <input type="file" accept="image/*" className="form-control-file" onChange={showPreview} id="image-uploader"/> 
                    </div>
                    <div className="form-group">
                        <input type="datetime-local" className="form-control" placeholder="Date Time" name="date_time" value={values.date_time}
                       onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Enter the prescription items and qty" name="status" value={values.status} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="What are the symptoms?" name="status2" value={values.status2} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Pharmacy Name" name="pharmacyName" value={values.pharmacyName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className={"form-control" + applyErrorClass('customerName')}  placeholder="Your Name" name="customerName" value={values.customerName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Patient Name" name="patientName" value={values.patientName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Patient Age" name="patientAge" value={values.patientAge} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Delivery address" name="address" value={values.address} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Your Email" name="email" value={values.email} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Contact Number" name="teleNo" value={values.teleNo} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group text-center">
                        <button type="submit" className="btn btn-light">submit</button>
                        
                    </div>
                    

                </div>
            </div>
        </form>
    </>
    )
}

代码太长了。但我已将它们全部上传，以便更好地了解我的问题。

标签： javascriptreactjs