0

I am trying to implement a crud application in MVC.NET with React. I am displaying the displaying the Employee table data along with edit/delete links corresponding to each records. On clicking the edit link, I display the form with the corresponding values filled in the text field. But I am not able to alter or edit the values in the text field. Please let me know how to correct it.

Employee table:

enter image description here

Edit Form:

enter image description here

Please find the code below:

const element = <div>
<form name="contactForm" noValidate onSubmit={this.handleSubmit}>
<p>EmployeeID
<br />
<input type="text" value={data.EmployeeID}/></p>
<br /><p>FirstName
<br />
<input type="text" value={data.FirstName} /></p>
<br /><p>LastName
<br />
<input type="text" value={data.LastName} /></p>
<br /><p>Gender
<br />
<input type="text" value={data.Gender} /></p>
<br /><p>Designation
<br />
<input type="text" value={data.Designation} /></p>
<br /><p>Salary
<br />
<input type="number" value={data.Salary} /></p>
<br /><p>City
<br />
<input type="text" value={data.City} /></p>
<br /><p>Country
<br />
<input type="text" value={data.Country} /></p>
<button type="submit">Submit</button>   
</form>
                                           </div>;
Praveen Mohan
  • 211
  • 1
  • 6
  • 16
  • You need to listen to the onChange event on each input and update the state. Please check React tutorial. https://reactjs.org/docs/forms.html – klugjo Dec 18 '17 at 04:34
  • @klugjo How assign values to the state on the form load itself? So that the text fields will be already filled on the form load. – Praveen Mohan Dec 18 '17 at 04:44
  • See here https://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript – Vipin Kumar Dec 18 '17 at 05:31

0 Answers0