表单提交时未从默认值设置状态值

Question

我有一个表单，其中两个输入字段都将defaultValue设置为prop值。在提交表单时，我正在传递来自其他输入的设置为状态属性的值，但是如果来自这两个输入字段的值保持不变，我不确定如何捕获defaultValue。如果值永不更改，是否有遵循最佳实践的方法来捕获defaultValue？

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>
        )
    }
}

带有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}/>

提交的值（csrf和主题未使用defaultValues出现）：

{"csrf":"","subject":"","emails":"test@gmail.com","comment":"dsfsdfadsfs"}