Javascript 如何调用函数的输入值

您好，我正在尝试调用我的表单内的输入值，以我的获取功能，但它无法读取它，请帮助我。。。我要做一个回帖，这样我就可以把它插入我的表中

我的功能是

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>

名称
地址
部门
接近

您正在控制来自父组件的表单值，因此我建议您也从父组件传递一个提交函数，单击提交，在父组件中执行api调用

如果在父组件中执行api调用，则需要通过

this.state.key

访问值，如果在子组件中执行api调用，则需要使用

this.props.key

访问值

注意：我假设您在子组件更改时更新父组件中的输入值，因为您从父组件传递了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(){
    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)
}

---

我试图添加到我的API上，为什么它会说null？你在构造函数中绑定了

handleSubmit

方法了吗？如果没有，那么在构造函数中写这行：

this.handleSubmit=this.handleSubmit.bind（this）

我将把它放在哪里？对不起，我是新来的嘿，我应该用状态还是道具？我要在我的api上添加数据？