Question

我使用reactjs框架创建了laravel项目，而我是这个框架的新手。我有问题，为什么每次提交表单时都会发生。

目标：用户可以通过在线注册

问题：

为什么当我向按钮提交URL链接中显示的用户输入值时会发生这种情况？
我输入的数据未插入数据库。

代码：

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');


}

Answer 1

使用表单标签时，提交将触发基于提供的方法和操作URL的默认行为。就像在您的示例中一样，您正在显式处理数据，因此应防止默认行为。在句柄提交中添加以下代码

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})
}

有关更多信息，请参阅此link。

Answer 2

首先，我只想向您介绍JavaScript（ES6）中的 arrow函数。声明这样的私有方法：

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

可以节省不必要的构造器绑定时间。

关于您的问题，您没有显示this.handleSubmit()的内容。没有这个，我可以假设表单提交触发了一个get调用，因为您未能将method属性放入您的<form/>标记中，并且没有指出您的method属性将导致默认的get method 。使用get方法时，提交的数据将在浏览器的页面地址字段中可见。

编辑

您已经在问题中添加了handleSubmit()，看起来还可以。如果数据仍然显示在浏览器的地址字段中，请尝试在表单标签中添加method="post"，如下所示：

<form onSubmit={this.handleSubmit} method="post">

在url链接中显示输入值（ReactJs Laravel）

2 个答案: