React之受控组件和非受控组件

1、受控组件（建议使用）

1. 定义：存在表单元素的组件，表单元素的值会随着用户的输入，自动存放在state里面。
2. 亮点：1、使用onChange事件；2、不会滥用ref，这也是React官方文档所提倡的。

import React from 'react';
interface Props {}
interface State {
    username:string;
    password:string;
}
class Form extends Component<Props, State> {
	state = {
		username: '',
		password: '',
	}
	saveData = (dataType) => {
		return((event)=>{
			this.setState{ [dataType]: event.target.value }
		})		
	}
	submit = (event) => {
		event.preventDefault()
		const { username, password } = this.state
		console.log(`用户名:${username}, 密码:${password}`)
	}
	render() {
		return(
			<form onSubmit={this.submit}>
			用户名：<input type="text" name="username" onChange={this.saveData('username')}/>
			密码：<input type="password" name="password" onChange={this.saveData('password')}/>
			<button>登录</button>
			</form>
		)
	}
}
export default Form

2、非受控组件

1. 定义：存在表单元素的组件，表单元素的值只有在需要被调用时，才会被使用，通俗讲，即”现用现取“。

import React from 'react';
interface Props {}
interface State {}
class Form extends Component<Props, State> {
  refs: any = React.createRef()
  state = {}
  submit = (event) => {
  	event.preventDefault()
  	const username = this.refs.username.value
  	const password = this.refs.password.value
  	console.log(`用户名:${username}, 密码:${password}`)
  }
  render() {
  	return(
  		<form onSubmit={this.submit}>
  		用户名：<input type="text" name="username" ref='username'/>
  		密码：<input type="password" name="password" ref='password' />
  		<button>登录</button>
  		</form>
  	)
  }
}
export default Form