react16：非受控组件与受控组件

最新推荐文章于 2024-08-13 16:06:04 发布

richest_qi

最新推荐文章于 2024-08-13 16:06:04 发布

阅读量162

点赞数

分类专栏： React17/18 文章标签：受控组件非受控组件柯里化函数事件传参

本文链接：https://blog.csdn.net/qzw752890913/article/details/124001337

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

非受控组件

<!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>test</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Login extends React.Component {

            handleSubmit = () => {
                event.preventDefault();
                const username = this.usernameEle.value;
                const password = this.passwordEle.value;
                alert(`用户名：${username}，密码：${password}`);
            }

            render(){
                const {handleSubmit} = this;
                return (
                    <form onSubmit={handleSubmit}>
                        用户名：<input type="text" name="username" ref={c => this.usernameEle = c}/>&nbsp;
                        密码：<input type="password" name="password" ref={c => this.passwordEle = c}/>&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("app"));
    </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>test</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username:"",
                password:""
            }
            handleSubmit = () => {
                event.preventDefault();
                const {username,password} = this.state;
                alert(`用户名：${username}，密码：${password}`);
            }
            changeUsername = (event) => {
                this.setState({
                    username:event.target.value
                })
            }   
            changePassword = (event) => {
                this.setState({
                    password:event.target.value
                })
            }

            render(){
                const {username,password} = this.state;
                const {handleSubmit,changeUsername,changePassword} = this;
                return (
                    <form onSubmit={handleSubmit}>
                        用户名：<input type="text" name="username" value={username} onChange={changeUsername}/>&nbsp;
                        密码：<input type="password" name="password" value={password} onChange={changePassword}/>&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("app"));
    </script>
</body>

</html>

在这里插入图片描述

使用柯里化函数优化代码

高阶函数。
函数funcA接收的参数是一个函数，则函数funcA是一个高阶函数。如setTimeout、Promise、Array.prototype.map，它们都是高阶函数。
函数funcB的返回值是一个函数，则函数funcB也是一个高阶函数。
柯里化函数。
柯里化函数是一个高阶函数，柯里化函数的返回值是一个函数。
通过调用函数返回函数，实现多次接收参数最后统一处理的编码方式，就是柯里化。

在受控组件中，changeUsername、changePassword，这两个方法几乎完全一样，不同的是，一个修改的是username，一个修改的是password。
在这里插入图片描述
现在，用一个柯里化函数来替代这两个方法，对代码进行优化。

<!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>test</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username:"",
                password:""
            }
            handleSubmit = () => {
                event.preventDefault();
                const {username,password} = this.state;
                alert(`用户名：${username}，密码：${password}`);
            }
            changeFormData = (dataType) => {
                return (event) => {
                    this.setState({
                        [dataType]:event.target.value
                    })
                }
            }   

            render(){
                const {username,password} = this.state;
                const {handleSubmit,changeFormData} = this;
                return (
                    <form onSubmit={handleSubmit}>
                        用户名：<input type="text" name="username" value={username} onChange={changeFormData("username")}/>&nbsp;
                        密码：<input type="password" name="password" value={password} onChange={changeFormData("password")}/>&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("app"));
    </script>
</body>

</html>

通过事件传参来优化代码

react事件是自定义合成事件，不是原生DOM事件。
react事件通过事件委托的方式进行处理，委托给组件最外层的元素进行处理。

<!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>test</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username:"",
                password:""
            }
            handleSubmit = () => {
                event.preventDefault();
                const {username,password} = this.state;
                alert(`用户名：${username}，密码：${password}`);
            }

            changeFormData = (dataType,event) => {
                this.setState({
                    [dataType]:event.target.value
                })
            }

            render(){
                const {username,password} = this.state;
                const {handleSubmit,changeFormData} = this;
                return (
                    <form onSubmit={handleSubmit}>
                        用户名：<input type="text" name="username" value={username} onChange={event => changeFormData("username",event)}/>&nbsp;
                        密码：<input type="password" name="password" value={password} onChange={event => changeFormData("password",event)}/>&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById("app"));
    </script>
</body>

</html>

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react16：非受控组件与受控组件

文章目录非受控组件受控组件非受控组件<!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">
复制链接

扫一扫

专栏目录