受控组件

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

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

受控组件

非受控组件

猜你喜欢