React 收集表单数据

1. 非受控组件

class Login extends React.Component {
	handleSubmit = event => {
		event.preventDefault(); //阻止表单提交
		const { username, password } = this;
		alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`);
	};
	render() {
		return (
			<form onSubmit={this.handleSubmit}>
				用户名：
				<input ref={c => (this.username = c)} type="text" name="username" />
				密码：
				<input ref={c => (this.password = c)} type="password" name="password" />
				<button>登录</button>
			</form>
		);
	}
}

2. 受控组件

class Login extends React.Component {
	//初始化状态
	state = {
		username: '', //用户名
		password: '', //密码
	};

	//保存用户名到状态中
	saveUsername = event => {
		this.setState({ username: event.target.value });
	};

	//保存密码到状态中
	savePassword = event => {
		this.setState({ password: event.target.value });
	};

	//表单提交的回调
	handleSubmit = event => {
		event.preventDefault(); //阻止表单提交
		const { username, password } = this.state;
		console.log(`你输入的用户名是：${username},你输入的密码是：${password}`);
	};

	render() {
		return (
			<form onSubmit={this.handleSubmit}>
				用户名：
				<input onChange={this.saveUsername} type="text" name="username" />
				密码：
				<input onChange={this.savePassword} type="password" name="password" />
				<button>登录</button>
			</form>
		);
	}
}

1. 高阶函数

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数：

• 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
• 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

常见的高阶函数有：Promise、setTimeout、arr.map()等等。

2. 函数柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

function sum(a){
	return(b)=>{
		return (c)=>{
			return a+b+c;
		}
	}
}

3. 函数柯里化实现表单数据收集

class Login extends React.Component {
	//初始化状态
	state = {
		username: '', //用户名
		password: '', //密码
	};

	//保存表单数据到状态中
	saveFormData = dataType => {
		return event => {
			this.setState({ [dataType]: event.target.value });
		};
	};

	//表单提交的回调
	handleSubmit = event => {
		event.preventDefault(); //阻止表单提交
		const { username, password } = this.state;
		alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
	};
	render() {
		return (
			<form onSubmit={this.handleSubmit}>
				用户名：
				<input onChange={this.saveFormData('username')} type="text" name="username" />
				密码：
				<input onChange={this.saveFormData('password')} type="password" name="password" />
				<button>登录</button>
			</form>
		);
	}
}

4. 改进

class Login extends React.Component {
	//初始化状态
	state = {
		username: '', //用户名
		password: '', //密码
	};

	//保存表单数据到状态中
	saveFormData = (dataType, event) => {
		this.setState({ [dataType]: event.target.value });
	};

	//表单提交的回调
	handleSubmit = event => {
		event.preventDefault(); //阻止表单提交
		const { username, password } = this.state;
		alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
	};
	render() {
		return (
			<form onSubmit={this.handleSubmit}>
				用户名：
				<input onChange={event => this.saveFormData('username', event)} type="text" name="username" />
				密码：
				<input onChange={event => this.saveFormData('password', event)} type="password" name="password" />
				<button>登录</button>
			</form>
		);
	}
}