我怎樣才能調用我的函數的輸入值ReactJs

嗨我想調用我的輸入內的值在表單中我的獲取功能，但它不能讀取請幫助我...我打算做取回後，所以我可以將它插入我的表裏面......我怎樣才能調用我的函數的輸入值ReactJs

我的功能就像是

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>

來源

2017-05-18 Patricia Mari Maclang

您是控制形式父母成分的價值觀，所以我會也可以使用父組件和onClick提交函數來傳遞提交函數，在父代執行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功能綁定在建設TOR，寫這樣的構造：

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

來源

2017-05-18 06:24:39

我嘗試對我的API –

爲什麼它說空

你綁定在構造函數中'handleSubmit'方法添加？如果沒有，那麼在構造函數中寫下這行：'this.handleSubmit = this.handleSubmit.bind（this）' –

我怎樣才能調用我的函數的輸入值ReactJs

回答

相關問題