آفلاین
user-avatar

ساخت فرم پیشرفته در ریکت

2 سال پیش
توسط محمد آپدیت شد
آفلاین
user-avatar
محمد ( 18952 تجربه )
2 سال پیش

من یک میخام اطلاعات یک شهر را در dropdown بخونم و یک فیلد دیگه هم دارم میخام اطلاعات را پست کنم سمت سرور راهحل چیه اومدم اطلاعات را لیست کنم fetch میشه و لیتوی dropwdown نمایش نمیده ارور هم نمیده ممنونم یک تکه کد برام بفرستید

آفلاین
user-avatar
علیرضا اصلانی ( 11804 تجربه )
2 سال پیش
تخصص : Web and Mobile Developer

سادس داخل تگ select باید با map مقادیری که از نت گرفتید رو لیست کنید

<select>
  {yourData.map(data => <option key={data.id} value={data.value}>{data.text}</option>)}
</select>

نشد کدتونم بذارید تا بهتر بشه مشکلو پیدا کرد

آفلاین
user-avatar
محمد ( 18952 تجربه )
2 سال پیش

@aaslani
ممنون از راهنمایی
با راهنمایی شما اوکی شد اما مشکل دیگه که هستش
من با انتحاب شدن id و ارسال به سرور مشکل دارم چون من یک فیلد نام دارم دو تا فیلد Dropdown.
در فیلد اول نام وارد میشه (text)
در فیلد دوم نامی انتخاب میشه (dropdown)
در فیلد سوم فیلدهایی در dropdown تیک زده میشه (dropdown) و بعد ارسال میشه به سرور
اما مشکل دارم که چطور id دو تا dropdown ؤا بفرستم به سرور و همینطور در dropwdown دوم لیست از id که تیک زده شده بفرستم به سرور

import React, { Component } from 'react';
import validator from 'validator';
import axios from 'axios';

class TransportAdd extends Component {

    constructor(props){
            super(props);

            this.state = {
                isLoading: true,
                fields : {
                    name : ''
                },
                drivers: [],
                students:[],
                errors : {

                }
            }

    }

    componentDidMount(){
        this.fetchDriverData();
        this.fetchStudentData();
    }

    fetchDriverData(){
        let officerID = localStorage.getItem('officer_id');     

        fetch(`http://localhost:4040/officer/${officerID}/driver`)
            .then(response => {
                return response.json();
            })
            .then(initialDrivers => initialDrivers.map(driver => {
                return driver;
            }))
            .then(drivers =>{
                    this.setState({                                  
                        drivers                     
                    })
                }               
            ) 
            .catch(error => {
                console.log('parsing failed...' + error);
        });        
    }

    fetchStudentData(){
        let officerID = localStorage.getItem('officer_id');     

        fetch(`http://localhost:4040/officer/${officerID}/students`)
            .then(response => {
                return response.json();
            })
            .then(initialStudents => initialStudents.map(student => {
                return student;
            }))
            .then(students =>{
                    this.setState({                                  
                        students                        
                    })
                }               
            ) 
            .catch(error => {
                console.log('parsing failed...' + error);
        });        
    }

    handleValidation(callback) {
        let { fields } = this.state;
        let errors = {};
        let formIsValid = true;

        //username
        if(validator.isEmpty(fields.name)){
                formIsValid = false;
                errors['name'] = "نام راننده خالی است";
        } else if(! validator.isLength(fields.name , { min : 3 , max : 20})) {
                formIsValid = false;
                errors['name'] = "فرمت نام راننده اشتباه است";
        }

        this.setState({ errors },() => {
                return callback(formIsValid)
        });

    }

    handleChange(event) {
        let fields = this.state.fields;
        let target = event.target;
        fields[target.name] = target.value;
        this.setState({fields});
    }

    handleRequest(){
        const { name } = this.state.fields;         
        const { drivers } = this.state;
        const { students } = this.state;
        // debugger;
        let officerID = localStorage.getItem('officer_id');

        axios({
            method : 'post',
            url:`http://localhost:4040/officer/${officerID}/transport`,
            data: {
                name,
                drivers,
                students
            },
            config:{ headers : {'Accept': 'application/json','Content-Type':'application/json'}}
        })
        .then(response => {
            console.log('success');
            this.props.history.push(`/transport`);
        })
        .catch(error => {
            console.log(error);

        })
    }        

    handleSubmit(event) {
        event.preventDefault();

        this.handleValidation((valid) => {
            if(valid) this.handleRequest()
        })
    }

    render() {
            const { name } = this.state.fields;
            const { drivers,students } = this.state;
            const { errors } = this.state;

            console.log(drivers);
            return (
                    <div>
                        <div className="content-wrapper">
                                <h4>ایجاد سرویس</h4>
                                <hr/>

                                <form onSubmit={this.handleSubmit.bind(this)}>
                                        <div className="col-md-3">
                                                <div className="form-group">
                                                    <label>نام سرویس:</label>
                                                    <input
                                                        type="text"
                                                        className={["form-control" , errors["name"] ? 'is-invalid' : ''].join(' ')}
                                                        name="name"
                                                        value={name}
                                                        onChange={this.handleChange.bind(this)}
                                                        placeholder=" نام سرویس را وارد نمایید"/>

                                                    <span className="invalid-feedback rtl" style={{ display : errors["name"] ? 'block' : 'none'}}>{errors["name"]}</span>
                                                </div>
                                                <div className="form-group">
                                                    <label>انتخاب راننده:</label>
                                                    <select className="form-control">
                                                        {                                                                   
                                                            drivers.map(drive => <option key={drive._id} value={drive._id}>{drive.firstname} {drive.lastname}</option>)
                                                        }
                                                    </select>
                                                </div>
                                                <div className="form-group">
                                                    <label>انتخاب دانش آموز:</label>
                                                    <select className="form-control">
                                                        {                                                                   
                                                            students.map(student => <option key={student._id} value={student._id}>{student.firstname} {student.lastname}</option>)
                                                        }
                                                    </select>
                                                </div>
                                                <div className="form-group">
                                                    <button className="btn btn-outline-primary btn-sm" type="submit">ذخیره سرویس</button>
                                                </div>

                                        </div>
                                </form>

                        </div>
                    </div>
            );
    }
}

export default TransportAdd;
برای ارسال پاسخ باید وارد سایت شوید