react_user.js
import React from 'react';
import $ from 'jquery';
class Users extends React.Component {
constructor(){
super();
this.state = {
FirstName:"",
LastName:"",
Email:"",
Subject:"",
Message:"",
RetrivedData:[]
}
}
componentDidMount(){
this.setState({
FirstName:"sadf",
LastName:"sadf",
Email:"sadf",
Subject:"sdaf",
Message:"asf"
})
this.RetrieveLinksData();
}
FirstName = (event)=>{
this.setState({
FirstName:event.target.value
});
}
LastName = (event)=>{
this.setState({
LastName:event.target.value
});
}
EMail = (event)=>{
this.setState({
Email:event.target.value
});
}
Subject = (event) =>{
this.setState({
Subject:event.target.value
});
}
textArea = (event)=>{
this.setState({
Message:event.target.value
});
}
postList = (event)=>{
let FirstName = this.state.FirstName;
let LastName = this.state.LastName;
let Email = this.state.Email
let Message = this.state.Message;
let Subject = this.state.Subject;
let ListName = "UserData";
let dataValues = JSON.stringify({
__metadata: { 'type': "SP.Data." + ListName.charAt(0).toUpperCase() + ListName.split(" ").join("").slice(1) + "ListItem" },
Title: FirstName,
LastName:LastName,
Email:Email,
Message:Message,
Subject:Subject
});
$.ajax({
url: "https://mercedessaga.sharepoint.com/sites/timesheetapplication/_api/web/lists/GetByTitle('UserData')/items",
mode: 'cors',
cache: 'default',
credentials: 'include',
type: "POST",
contentType: "application/json;odata=verbose",
data: dataValues,
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data) {
alert("Data Saved Successfully");
this.RetrieveLinksData();
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
}
RetrieveLinksData() {
var reactHandler = this;
var objHeaders = {
type: "GET",
headers: {
"accept": "application/json;odata=verbose"
},
mode: 'cors',
cache: 'default',
credentials: 'include'
}
fetch("https://mercedessaga.sharepoint.com/sites/timesheetapplication/_api/web/lists/getbytitle('UserData')/items?$select=*",
objHeaders).then(function (response) {
return response.json()
})
.then(function (json) {
var results = json.d.results;
reactHandler.setState({RetrivedData: results});
})
.catch(function (ex) {
console.log('parsing failed', ex)
})
}
render(){
return (
<div className="row">
<div className="col-md-6 col-sm-6">
<form action="#" className="p-5 bg-white">
<h2 className="h4 text-black mb-5">Form</h2>
<div className="row form-group">
<div className="col-md-6 mb-3 mb-md-0">
<label className="text-black" for="fname">First Name</label>
<input type="text" id="fname" className="form-control" onChange={this.FirstName}/>
</div>
<div className="col-md-6">
<label className="text-black" for="lname">Last Name</label>
<input type="text" id="lname" className="form-control" onChange={this.LastName}/>
</div>
</div>
<div className="row form-group">
<div className="col-md-12">
<label className="text-black" for="email">Email</label>
<input type="text" id="email" className="form-control" onChange={this.EMail}/>
</div>
</div>
<div className="row form-group">
<div className="col-md-12">
<label className="text-black" for="subject">Subject</label>
<input type="subject" id="subject" className="form-control" onChange={this.Subject}/>
</div>
</div>
<div className="row form-group">
<div className="col-md-12">
<label className="text-black" for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="7" className="form-control" placeholder="Write your notes or questions here..." onChange={this.textArea}></textarea>
</div>
</div>
<div className="row form-group">
<div className="col-md-12">
<div className="btn" onClick={this.postList}>
Submit
</div>
</div>
</div>
</form>
</div>
<div className="col-md-6">
{
this.state.RetrivedData.map(function (item,key){
return(
<div id={key}>{item.Title}</div>
)
})
}
</div>
</div>
)
}
}
export default Users;
Comments
Post a Comment