详解非受控组件的实现方案

非受控组件

在上一个小节中，我们学习了受控组件，但是有时候受控组件不能完全满足我们的需求，所以React中还提供了非受控组件的方式来操作表单元素。

使用非受控组件，这时表单数据将交由 DOM 节点来处理，代码如下：

class Welcome extends React.Component {
    state = {
        msg: 'hello'
    }
    changeInput = (ev) => {
        this.setState({
            msg: ev.target.value
        });
    }
    render(){
        return (
            <div>
                <input type="text" defaultValue={this.state.msg} onInput={this.changeInput} /> { this.state.msg }
            </div>
        );
    }
}

其中defaultValue属性可以设置表单的默认值，下面再举一个上传控件的非受控组件使用方式。

class Welcome extends React.Component {
    myRef = React.createRef()
    handleSubmit = (ev) => {
        console.log(
            this.myRef.current.files[0].name 
        );
        ev.preventDefault();
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="file" ref={this.myRef} />
                <input type="submit" value="submit" />
            </form>
        );
    }
}