-
比如表单、input、radio、checkbox等标签，数据现用现取的标签叫非受控组件
<!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>非受控组件</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <!-- 引入prop-types --> <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script> <script type="text/babel"> // 创建组件 class Login extends React.Component { render() { return ( <form action="http://www.baidu.com" 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> ) } // 表单提交回调 handleSubmit = (event) => { event.preventDefault(); // 阻止表单默认提交的行为 const { username, password } = this; alert(username.value, password.value) } } // 渲染组件 ReactDOM.render(<Login />, document.getElementById('test')) </script> </body> </html>
把非受控组件的值存到状态中，取的时候从状态中取，叫受控组件
<!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>受控组件</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <!-- 引入prop-types --> <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script> <script type="text/babel"> // 创建组件 class Login extends React.Component { render() { return ( <form action="http://www.baidu.com" onSubmit={this.handleSubmit}> 用户名：<input onChange={this.saveUsername} type="text" name="username" /> 密码：<input onChange={this.savePassword} type="password" name="password" /> <button>登录</button> </form> ) } // 保存用户名 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); } } // 渲染组件 ReactDOM.render(<Login />, document.getElementById('test')) </script> </body> </html>
-
高阶函数、函数柯里化
<!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>高阶函数,函数柯里化</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <!-- 引入prop-types --> <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script> <script type="text/babel"> // #region /* 高阶函数：如果一个函数符合下面两个中的任何一个，那该函数就是高阶函数 1、若A函数接收的一个参数是一个函数，那么A就可以称为高阶函数 2、若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数 常见的高阶函数有：Promise、setTimeout、数组身上的一些方法等 函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式 */ // #endregin // 创建组件 class Login extends React.Component { render() { return ( <form action="http://www.baidu.com" onSubmit={this.handleSubmit}> 用户名：<input onChange={this.saveFormData('username')} type="text" name="username" /> 密码：<input onChange={this.saveFormData('password')} type="password" name="password" /> <button>登录</button> </form> ) } // 保存用户名 saveUsername = (event) => { this.setState({ username: event.target.value }) } // 保存密码 savePassword = (event) => { this.setState({ password: event.target.value }) } // 保存表单数据 saveFormData = (dataType) => { return (event) => { this.setState({ [dataType]: event.target.value }) } } // 表单提交回调 handleSubmit = (event) => { event.preventDefault(); // 阻止表单默认提交的行为 const { username, password } = this.state; console.log(username, password); } } // 渲染组件 ReactDOM.render(<Login />, document.getElementById('test')) </script> </body> </html>
不用柯里化实现
<!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>不用函数柯里化实现</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js，用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script> <!-- 引入prop-types --> <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script> <script type="text/babel"> // 创建组件 class Login extends React.Component { render() { return ( <form action="http://www.baidu.com" onSubmit={this.handleSubmit}> 用户名：<input onChange={ e => this.saveFormData(e, 'username') } type="text" name="username" /> 密码：<input onChange={ e => this.saveFormData(e, 'password') } type="password" name="password" /> <button onClick={this.handleSubmit}>登录</button> </form> ) } // 保存表单数据 saveFormData = (event, dataType) => { this.setState({ [dataType]: event.target.value }) } // 表单提交回调 handleSubmit = (event) => { event.preventDefault(); // 阻止表单默认提交的行为 const { username, password } = this.state; console.log(username, password); } } // 渲染组件 ReactDOM.render(<Login />, document.getElementById('test')) </script> </body> </html>
-