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

版权声明：本文为博主原创文章，未经博主容许不得转载。 https://blog.csdn.net/zeping891103/article/details/83832802

受控组件

在<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;