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;