Отображение входного значения в URL-ссылке (ReactJs Laravel) - PullRequest
Новая
       3

Отображение входного значения в URL-ссылке (ReactJs Laravel)

0 голосов
/ 21 сентября 2018

Я создал проект laravel с фреймворком реагировать, и я новичок в этом фреймворке.У меня проблема и почему это происходит каждый раз, когда я отправляю форму.

Problem

Цель: пользователи могут зарегистрироваться через Интернет

Проблема:

  1. Почему это происходит, когда я отправляю кнопке входное значение пользователя, показанное в URL-ссылке?
  2. Введенные мною данные не вставляются в базу данных.

Код: 

constructor() {
    super();
    this.state = {

        f_name:'',
        l_name:'',
        m_name:'',
        email:'',
        home_num:'',
        contact_num:'',
        Job_name:[],
        employ_status:'',
        employ_relocate:'',
        employ_start_date:'',
        employ_file:''


    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handle_fname = this.handle_fname.bind(this);   
    this.handle_lname = this.handle_lname.bind(this);
    this.handle_mname = this.handle_mname.bind(this); 
    this.handle_email = this.handle_email.bind(this);
    this.handle_homenum = this.handle_homenum.bind(this);
    this.handle_contactnum = this.handle_contactnum.bind(this); 
    this.handle_employ_status = this.handle_employ_status.bind(this);
    this.handle_employ_relocate = this.handle_employ_relocate.bind(this);
    this.handle_employ_start_date = this.handle_employ_start_date.bind(this);
    this.handle_employ_file = this.handle_employ_file.bind(this);
}

componentDidMount() {
    const id = this.props.match.params.id;
    axios.get('/api/online_application_job_title/' +id).then(response => {
        this.setState({
            Job_name:response.data
        })
    })
}



    handleSubmit(e)
{
    const data = {
        firstname: this.state.f_name,
        lastname : this.state.l_name,
        middlename : this.state.m_name,
        email : this.state.email,
        home_number : this.state.home_num,
        contact_num : this.state.contact_num,
        job : this.state.Job_name[0].position_name,
        employ_status : this.state.employ_status,
        employ_relocate : this.state.employ_relocate,
        employ_start_date : this.state.employ_start_date,
        employ_file : this.state.employ_file

    }



    axios.post('/api/save_application',data).then(response => {
        console.log(response);
    }).catch(error => console.log(error));

}

handle_fname(e)
    {
        this.setState({
            f_name:e.target.value,
        })
    }
    handle_lname(e){
        this.setState({
            l_name:e.target.value,
        })
    }
    handle_mname(e){
        this.setState({
            m_name:e.target.value,
        })
    }
    handle_email(e){
        this.setState({
            email:e.target.value,
        })
    }
    handle_homenum(e){
        this.setState({
            home_num:e.target.value
        })
    }
    handle_contactnum(e){
        this.setState({
            contact_num:e.target.value
        })
    }
    handle_employ_status(e){
        this.setState({
            employ_status:e.target.value
        });
    }
    handle_employ_relocate(e){
        this.setState({
            employ_relocate:e.target.value,
        })
    }
    handle_employ_start_date(e){
        this.setState({
            employ_start_date:e.target.value,
        })
    }

    handle_employ_file(e){

        this.setState({
            employ_file: e.target.files[0].extension
        })


    }
renderName() {
    return (
        this.state.Job_name.map(name => (
            <input placeholder="" value={name.position_name} type="text" className="form-control"/>
        ))
    )
}





render() {

    return (
        <div>
            <div className="header">
                <div className="jumbotron">
                    <h1>Online Application</h1>
                </div>
            </div>

            <form onSubmit={this.handleSubmit}>
                <div className="container">
                    <h5><b>Personal Info</b></h5>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <input 
                            placeholder="First Name*"
                            value={this.state.f_name}
                            onChange={this.handle_fname}
                            className="form-control"/>

                        </div>
                        <div className="col-md-6">
                            <input 
                            placeholder="Last Name*"
                            value={this.state.l_name} 
                            onChange={this.handle_lname}
                            className="form-control"/>
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <input 
                            placeholder="Middle Name*"
                            value={this.state.m_name} 
                            onChange={this.handle_mname} 
                            className="form-control"/>
                        </div>
                        <div className="col-md-6">
                            <input 
                            placeholder="Email Address*" 
                            type="email"
                            value={this.state.email} 
                            onChange={this.handle_email} 
                            className="form-control"/>
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <input 
                            placeholder="Home Number*" 
                            type="number"
                            value={this.state.home_num} 
                            onChange={this.handle_homenum} 
                            className="form-control"/>
                        </div>
                        <div className="col-md-6">
                            <input 
                            placeholder="Contact Number*" 
                            type="number"
                            value={this.state.contact_num} 
                            onChange={this.handle_contactnum} 
                            className="form-control"/>
                        </div>
                    </div>
                    <br/><br/>
                    <h5><b>Employment Application</b></h5>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <p>Position Applying For</p>
                            {this.renderName()}
                        </div>
                        <div className="col-md-6">

                        </div>
                    </div>
                    <br/><br/>
                    <div className="row">
                        <div className="col-md-6">
                            <p>1. What is your current employment status?</p>
                            <div className="form-check-inline">
                                <label className="form-check-label">
                                    <input 
                                    type="radio" 
                                    className="form-check-input"  
                                    name="employmentstatus"
                                    onChange={this.handle_employ_status} 
                                    defaultChecked={false}
                                    value="Unemployed"/>Unemployed
                                </label>
                            </div>
                            <div className="form-check-inline">
                                <label className="form-check-label">
                                    <input 
                                    type="radio" 
                                    className="form-check-input" 
                                    name="employmentstatus"
                                    onChange={this.handle_employ_status}  
                                    defaultChecked={false}
                                    value="Employed"/>Employed
                                </label>
                            </div>
                            <div className="form-check-inline disabled">
                                <label className="form-check-label">
                                    <input 
                                    type="radio" 
                                    className="form-check-input" 
                                    name="employmentstatus"
                                    onChange={this.handle_employ_status} 
                                    defaultChecked={false} 
                                    value="Self-Employed"/>Self-Employed
                                </label>
                            </div>
                            <div className="form-check-inline disabled">
                                <label className="form-check-label">
                                    <input 
                                    type="radio" 
                                    className="form-check-input" 
                                    name="employmentstatus" 
                                    onChange={this.handle_employ_status}
                                    defaultChecked={false}  
                                    value="Student"/>Student
                                </label>
                            </div>
                        </div>
                        <div className="col-md-6"></div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <p>2. Are you willing to relocate?</p>
                            <div className="form-check-inline">
                                <label className="form-check-label">
                                    <input type="radio" 
                                    name="relocate"
                                    onChange={this.handle_employ_relocate} 
                                    className="form-check-input" 
                                    value="Yes"/>Yes
                                </label>
                            </div>
                            <div className="form-check-inline">
                                <label className="form-check-label">
                                    <input type="radio" 
                                    name="relocate" 
                                    onChange={this.handle_employ_relocate} 
                                    className="form-check-input" 
                                    value="No"/>No
                                </label>
                            </div>
                        </div>
                        <div className="col-md-6"></div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <p>3. When is your available start date?</p>
                            <input 
                            name="startdate"
                            type="date"
                            onChange={this.handle_employ_start_date}
                            value={this.state.employ_start_date}  
                            required=""
                            className="form-control"/>
                        </div>
                        <div className="col-md-6"></div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <p>4. Kindly attach a copy of your resume (PDF,docx files only).</p>
                            <div className="custom-file">
                                <input 
                                type="file" 
                                name="file"
                                accept="application/msword,application/pdf"
                                onChange={this.handle_employ_file}
                                className="custom-file-input" 
                                id="inputGroupFile04"/>
                                <label className="custom-file-label" htmlFor="inputGroupFile04">Choose file</label>
                            </div>
                        </div>
                        <div className="col-md-6"></div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-6">
                            <input 
                            className="btn btn-outline-primary btn-large form-control col-md-5"  
                            type="submit" 
                            value="Send Application"/>
                        </div>
                        <div className="col-md-6"></div>
                    </div>
                </div>
            </form>


        </div>
    )
}

Контроллер: 

public function save_application(Request $request)
{
    $firstname = $request->get('firstname');
    $lastname = $request->get('lastname');
    $middlename = $request->get('middlename');
    $email = $request->get('email');
    $home_number = $request->get('home_number');
    $contact_num = $request->get('contact_num');
    $job = $request->get('job');
    $employ_status = $request->get('employ_status');
    $employ_relocate = $request->get('employ_relocate');
    $employ_start_date = $request->get('employ_start_date');
    $employ_file = $request->get('employ_file');

    $now = new DateTime();

    DB::insert('INSERT INTO onlineapplication 
    (position_name,firstname,middlename,lastname,email,homenumber,phonenumber,employmentstatus,relocate,starting_date,destination,file_img_name,Status) 
    VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)',[

        $firstname,
        $lastname,
        $middlename,
        $email,
        $home_number,
        $contact_num,
        $job,
        $employ_status,
        $employ_relocate,
        $employ_start_date,
        $employ_file

    ]);


    return response()->json('Successfully inserted');


}

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Когда используется тег формы, отправка будет запускать поведение по умолчанию на основе предоставленного метода и URL-адреса действия.как в вашем примере вы обрабатываете данные явно, вы должны предотвратить поведение по умолчанию.добавьте приведенный ниже код в дескриптор submit 

handleSubmit(e) {
 e.preventDefault();
 ...
 ...
}

, это предотвратит поведение по умолчанию.

Улучшение для обновления состояния: вам не нужны отдельные функции для обновления входного значения, чтобы утверждать, что это можетбыть объединенным в одной функции.чтобы объединить, введите имя входа, такое же как имя состояния. 

this.state ={
 "f_name": '',
 "l_name": '',
 ...
}



<input name="f_name" ... onChange={this.handleInputChange}/>
<input name="l_name" .. onChange={this.handleInputChange}/>

handleInputChange(e){
  let target = e.target;
  let name = target.name;
  let value = target.value

  this.setState({[name]: value})
}

для получения дополнительной информации см. эту ссылку .

0 голосов
/ 21 сентября 2018

Во-первых, я просто хочу познакомить вас с функцией arrow в JavaScript (ES6).Объявление частных методов следующим образом: 

handle_fname = (e) =>
{
    this.setState({
        f_name:e.target.value,
    })
}

сэкономит ваше время от ненужных привязок в конструкторе.

Что касается вашего вопроса, вы пропустили показ содержимого вашего this.handleSubmit().Без этого я могу предположить, что отправка формы произвела вызов get, так как вам не удалось вставить атрибут method в ваш тег <form/>, и без указания атрибута вашего метода будет получен метод get по умолчанию.При использовании метода Get, отправленные данные будут видны в поле адреса страницы вашего браузера.

РЕДАКТИРОВАТЬ

Вы уже добавили handleSubmit() в свой вопрос, иэто выглядит хорошо.Если данные все еще отображаются в поле адреса вашего браузера, попробуйте добавить method="post" в тег формы, например: 

<form onSubmit={this.handleSubmit} method="post">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...