State Value Not Being Set from Default Value on Form Submission - reactjs

Question

I have a form where two of my input fields have a defaultValue set to prop values. On form submission I am passing the values from other inputs that are set to state properties, but I am not sure how to capture the defaultValue if the values from those two input fields remain unchanged. Is there a method that follows best practices to capture the defaultValue if the value never changes?
import React from 'react';
import { API_ROOT } from '../../../../config/api-config';
//Annotation - Footer - Email Annotation Modal
export default class EmailAnnotationForm extends React.Component {
constructor(props) {
super(props);
this.state = {
csrf: '',
subject: '',
emails: '',
comment: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleClearForm = this.handleClearForm.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
console.log(event);
this.setState({
[name]: value
});
console.log(target)
console.log(name)
console.log(value)
console.log(JSON.stringify(this.state));
}
handleFormSubmit(event) {
console.log("handleFormSubmit")
const body = {
csrf: this.state.csrf,
subject: this.state.subject,
emails: this.state.emails,
comment: this.state.comment
};
event.preventDefault();
var route = `${API_ROOT}` + '/api/annotation/' + this.props.annotationId + '/share/email';
fetch(route,
{
method: 'POST',
body: JSON.stringify(body),
compress: false,
headers: {
'X-CSRF-Token': this.state.csrf,
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(res => {
return res.json();
})
.then(data => {
console.log(data)
handleClearForm()
this.setState({'flash': 'success'});
})
.catch(err => {
console.log(err);
this.setState({'flash': 'error'});
});
}
handleClearForm() {
console.log("handleClearForm")
this.setState({
csrf: '',
subject: '',
emails: '',
comment: ''
})
}
render() {
return (
<div className="annotation-footer__share-form-email">
<form action={"/api/annotation/" + this.props.annotationId + "/share/email"} method="post" onSubmit={this.handleFormSubmit} name="annotationEmailShare" id="share-email-form">
<input type="hidden" name="_csrf" defaultValue={this.props.csrf ? this.props.csrf : ""}/>
<div className="input-group annotation-footer__share-form-email-inputs">
<p><b>Subject:</b></p>
<input type="text" name="subject" className="form-control" defaultValue={this.props.title} onChange={this.handleInputChange}/><br />
</div>
<div className="input-group annotation-footer__share-form-email-inputs">
<p><b>Emails (Comma separate each eamil address):</b></p>
<input type="text" name="emails" className="form-control" onChange={this.handleInputChange}/><br />
</div>
<div className="input-group annotation-footer__share-form-email-inputs">
<p><b>Additional Comment:</b></p>
<textarea name="comment" rows="4" className="form-control" onChange={this.handleInputChange}>{this.state.comment}</textarea><br />
</div>
<button type="submit">Send Email</button>
</form>
</div>
)
}
}
Inputs with DefaultProps:
<input type="hidden" name="_csrf" defaultValue={this.props.csrf ? this.props.csrf : ""}/>
<input type="text" name="subject" className="form-control" defaultValue={this.props.title} onChange={this.handleInputChange}/>
Submitted Value (csrf and subject are not appearing with defaultValues):
{"csrf":"","subject":"","emails":"test#gmail.com","comment":"dsfsdfadsfs"}