React非受控组件

import React from 'react'
class Form extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bookName:'React同构'
        }
        this.nameInputRef = React.createRef();
        this.fileInputRef = React.createRef();
    }

    alertName=()=>{
        const el = this.nameInputRef.current;
        alert(el.value);
    }

    alertFileName=()=>{
        const el = this.fileInputRef.current
        alert(el.value)

    }

    render(){
        return <div>
                    <input defaultValue={this.state.bookName} ref={this.nameInputRef} />
                    <input type='file' ref={this.fileInputRef} />
                    <button onClick={this.alertName}>alertName</button>
                    <button onClick={this.alertFileName}>File</button>
               </div>
    }


}
export default Form;