react系列（14）受控组件与非受控组件

雨点打透心脏的1/2处 2021-09-16 22:54 271阅读 0赞

# 受控组件 #

在<input>这类表单元素中，当用户修改输入数据，表单会自动将其赋值到value属性中，这称为HTML元素维持了自身状态。但在react开发中，我们应尽可能的将这种可变的状态保存在组件的状态属性中，并且只能用 setState() 方法进行更新。也就是说，React不但负责渲染表单的组件而且自主控制着表单元素的输出值，这类组件称为受控组件。在开发组件时，应尽可能定义为受控组件，如：

import React from 'react';
    
    class NameForm extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {
    			value: ''
    		};
    
    		this.handleChange = this.handleChange.bind(this);
    		this.handleSubmit = this.handleSubmit.bind(this);
    	}
    
    	handleChange(event) {
    		this.setState({
    			value: event.target.value
    		});
    	}
    
    	handleSubmit(event) {
    		alert('A name was submitted: ' + this.state.value);
    		event.preventDefault();
    	}
    
    	render() {
    		return(
    			<div>
    				<input type="text" value={this.state.value} onChange={this.handleChange} /> 
    				<input type="button" onClick={this.handleSubmit} value="click" />
    			</div>
    		);
    	}
    }
    
    //导出组件
    export default NameForm;

该例子中 value=\{this.state.value\} onChange=\{this.handleChange\} 是整段代码的核心语句，其<input />的value属性只能通过自身状态this.state来控制。

# 非受控组件 #

在受控组件中，表单数据由 React 组件处理。如果让表单数据由dom处理时，这时候该组件称为非受控组件。比如说在HTML中，`<input type="file">` 可以让用户从其设备存储中选择一个或多个文件上传到服务器，或通过File API进行操作，它始终是一个不受控制的组件，因为它的值只能由用户设置，而不是以编程方式设置。针对非受控组件，我们通常通过ref从dom中获取表单值或操作dom节点。

import React from 'react';
    
    class FileInput extends React.Component {
    	constructor(props) {
    		super(props);
    		this.handleSubmit = this.handleSubmit.bind(this);
    		this.fileInput = React.createRef();
    	}
    	handleSubmit(event) {
    		event.preventDefault();
    		console.log(this.fileInput.current.files[0].name);
    	}
    
    	render() {
    		return(
    			<div>
            		<label>Upload file:</label>
              		<input type="file" ref={this.fileInput} />
            		<br />
            		<button onClick={this.handleSubmit}>Submit</button>
          		</div>
    		);
    	}
    }
    
    //导出组件
    export default FileInput;