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

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

---

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

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

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

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

关于您的问题，您没有显示

this.handleSubmit（）

的内容。如果没有这一点，我可以假设表单submit触发了一个

get

调用，因为您未能将

method

属性放入

标记中，并且没有指示您的method属性将导致默认的get方法。Get方法使用时，提交的数据将在浏览器的页面地址字段中可见

编辑

您已经在问题中添加了

handleSubmit（）

，看起来还可以。如果数据仍显示在浏览器的地址字段中，请尝试在表单标记中添加

method=“post”

，如下所示：

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

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

---

使用表单标记时，提交将触发基于提供的方法和操作url的默认行为。 在您的示例中，当您显式地处理数据时，您应该防止默认行为。 在handlesubmit中添加以下代码

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

this.state={
“f_名称”：“”，
“l_名称”：“”，
...
}
handleInputChange（e）{
设target=e.target；
让name=target.name；
让value=target.value
this.setState（{[name]：value}）
}

---

有关更多信息，请参阅。

给我的页面已过期