在 url 链接中显示输入值 (ReactJs Laravel)

Question

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

目标：用户可以在线注册

问题：

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


}

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）中的箭头函数。像这样声明私有方法：

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

将节省您在构造函数中进行不必要绑定的时间。

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

编辑

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

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