react-07React提交表单数据调用同一方法(高阶函数,函数柯里化概念)
1.高阶函数与函数柯里化概念
高阶函数：符合其中之一，那该函数为高阶函数
- 1.A函数，接收的参数是一个函数，那么A就是高阶函数
- 2.A函数，调用的返回值是一个函数，那么A就是高阶函数
常见的高阶函数：Promise setTimeout 数组常见的方法 arr.map、filter、reduce、sort、forEach、find、findIndex、some、every、bind、call、apply。
函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理函数编码形式。
2.提交表单数据调用同一方法
具体实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React 表单调用同一方法保存数据</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1. 创建组件class LoginForm extends React.Component {// 初始化状态state = {username: '',//用户名password: ''//密码}// change事件 保存表单数据saveFormData = (dataType) => {return (event) => {this.setState({// 使用对象展开运算符将用户名或密码存入 state状态中[dataType]: event.target.value})}}handleSubmit = (event) => {// 阻止默认事件 阻止提交表单event.preventDefault()console.log(this.state);const ojectData = this.statealert(`用户名：${ojectData.username}，密码：${ojectData.password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username" /><br />密码：<input onChange={this.saveFormData('password')} type="password" name="password" /><br /><button>登录</button></form>)}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<LoginForm />,document.getElementById('test'))</script>
</body></html>非柯里化实现提交
<body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1. 创建组件class LoginForm extends React.Component {// 初始化状态state = {username: '',//用户名password: ''//密码}// change事件 保存表单数据saveFormData = (dataType,event) => {this.setState({// 使用对象展开运算符将用户名或密码存入 state状态中[dataType]: event.target.value})}handleSubmit = (event) => {// 阻止默认事件 阻止提交表单event.preventDefault()console.log(this.state);const ojectData = this.statealert(`用户名：${ojectData.username}，密码：${ojectData.password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={event=>this.saveFormData('username',event)} type="text" name="username" /><br />密码：<input onChange={event=>this.saveFormData('password',event)} type="password" name="password" /><br /><button>登录</button></form>)}}// 2. 渲染虚拟DOM到页面ReactDOM.render(<LoginForm />,document.getElementById('test'))</script>
</body>