React非受控组件

非受控组件

1. 不受控组件表单的值由DOM控制，比如<input type='file'/>
2. React.createRef()的使用
3. defaultValue defaultChecked 的使用
4. 使用场景:

    必须手动操作dom,setState实现不了
    文件上传 <input type='file'>
    某些富文本编辑器，需要传入dom元素

import React from 'react';
class Basics07 extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            name: 'fux'
        }
        this.nameInputRef = React.createRef()
        this.fileInputRef = React.createRef()
    }

    render() {
        return (
            <>
                <input defaultValue={this.state.name} ref={this.nameInputRef}/>
                <span>state.name:</span>{this.state.name}
                <button onClick={this.print1}>打印</button>
                <br/>
                <input type='file' ref={this.fileInputRef}/>
                <button onClick={this.print2}>打印</button>
            </>
        )
    }

    print1 = () =>{
        const elem = this.nameInputRef.current
        alert(elem.value)
    }
    print2 = () =>{
        const elem = this.fileInputRef.current
        alert(elem.files[0].name)
    }
}


export default Basics07