如何在函数ReactJs上调用输入值

时间:2017-05-18 06:13:19

标签: javascript asp.net api reactjs web

您好我正在尝试将我在表单中输入的值调用到我的fetch功能但是它无法读取它请帮助我...我打算做一个获取帖子,所以我可以将它插入我的表...

我的功能就像

handleSubmit() {
  debugger
  function createNewProfile(profile) {
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
      method: 'POST',
      body: formData
    }).then(response => response.json())
  }

  createNewProfile(profile)
      .then((json) => {
            // handle success
          }
      ).catch(error => error);
}

这是我想要我的

的形式
<form onSubmit={this.handleSubmit}>
    <div className="container">
        <div className="modal-body">
            <table>
                <tbody>
                <tr>
                    <td>Name</td>
                    <td>
                        <input type="text"
                               name="Employee_Name"
                               className="EmployeeDetails"
                               value={this.props.Employee_Name}/>
                    </td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>
                        <input type="text"
                               name="Address"
                               className="EmployeeDetails"
                               value={this.props.Address}
                               onChange={this.props.handleChange}/>
                    </td>
                </tr>
                <tr>
                    <td>Department</td>
                    <td>
                        <input type="text"
                               name={this.props.Department}
                               className="EmployeeDetails"
                               value={this.props.Department}/>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
    <div className="modal-footer">
        <input type="submit" className="btn btn-info" onClick={ this.handleSubmit} value=" Add Employee"/>
        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</form>

1 个答案:

答案 0 :(得分:0)

您正在控制父组件的表单值,因此我建议您也从父组件传递提交函数,然后单击提交,在父级中执行api调用。

如果你在父组件中进行api调用,那么你需要通过this.state.key访问这些值,如果你在孩子中进行api调用,那么你需要使用this.props.key来访问这些值。 / p>

注意:我假设您在更改子组件中的父组件中更改输入值,因为您从父组件传递了onChange函数。

子组件中的Api调用:

handleSubmit(){
    let profile = this.props;
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(response => {
        //handle success
    })
}

父母组件中的Api调用:

handleSubmit(){
    let profile = this.state;
    const formData = new FormData();
    formData.append('Employee_Name', profile.Employee_Name);
    formData.append('Address', profile.Address);
    formData.append('Department', profile.Department);
    fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(response => {
        //handle success
    })
}

<强>更新

您需要在构造函数中绑定handleSubmit函数,编写如下构造函数:

constructor(){
    super();
    this.state = {};
    this.handleSubmit = this.handleSubmit.bind(this)
}