【React 全家桶】React 中的事件处理（包含高阶函数和柯里化的内容）

已于 2022-01-22 16:49:51 修改
阅读量233 收藏 1
点赞数
分类专栏： React 全家桶 文章标签： react.js javascript 前端 reactjs 前端框架
于 2022-01-15 00:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46318413/article/details/122498711
版权

React中的事件处理

一、React中的事件处理

1.通过onXxx属性指定事件处理函数（注意大小写）
   a.React使用的是自定义（合成）事件，而不是使用原生DOM事件 —— 为了更好的兼容性
   b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）—— 为了高效
2.通过event.target得到发生事件的DOM元素对象 —— 不要过度使用ref

<!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>createRef</title>
    <style>
        button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            /*
                1.通过onXxx属性指定事件处理函数（注意大小写）
                    a.React使用的是自定义（合成）事件，而不是使用原生DOM事件 —— 为了更好的兼容性
                    b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）—— 为了高效
                2.通过event.target得到发生事件的DOM元素对象 —— 不要过度使用ref
            */
            //创建ref容器
            myRef = React.createRef();
            myRef1 = React.createRef();
            //展示左侧数据
            showData = () => {
                alert(this.myRef.current.value)
            }
            //展示右侧输入框数据
            showData1 = (event) => {
                alert(event.target.value)
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input onBlur={this.showData1} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>

二、受控组件与非受控组件

受控组件（建议使用）：随着控件的输入来维护状态state就是受控组件，类似于Vue中的双向绑定。优势在于省略掉ref。
非受控组件：现取现用，不存到state里

受控组件（不需要写ref）：

<!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="form"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        //随着控件的输入来维护状态state就是受控组件，类似于Vue中的双向绑定
        //优势在于省略掉ref
        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
                alert(`账号为${username} ，密码为${password}`)
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" onChange={this.saveUsername} name="username" />
                        <input type="password" onChange={this.savePassword} name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.querySelector('#form'))
    </script>
</body>

</html>

在这里插入图片描述

非受控组件（需要写ref）：

<!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="form"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        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 type="text" name="username" ref={(ele) => this.username = ele} />
                        <input type="password" name="password" ref={(ele) => this.password = ele} />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.querySelector('#form'))
    </script>
</body>

</html>

在这里插入图片描述

三、高阶函数

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

1、若A函数接收的参数是一个函数

function A(fn) {
fn();
}
A(function () { console.log('高阶函数') })//高阶函数

2、若A函数的返回值是函数

function A() {
    return function () {
        console.log('高阶函数')
    }
}
A()();//高阶函数

常见的高阶函数：Promise、setTimeout 等

四、函数柯里化

//普通函数
function sum(a, b, c) {
    return a + b + c
}
//函数柯里化写法
function sum1(a) {
    return function (b) {
        return function (c) {
            return a + b + c
        }
    }
}
console.log(sum(1, 2, 3));//6
console.log(sum1(1)(2)(3))//6

在 React 中的标签事件接收的是一个函数，定义的事件函数可以以高阶函数和柯里化的方式实现。

使用函数柯里化的方式写事件处理(onChange)：

<!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="form"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        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 type="text" onChange={this.saveFormData('username')} name="username" />
                        <input type="password" onChange={this.saveFormData('password')} name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.querySelector('#form'))
    </script>
</body>

</html>

在这里插入图片描述
不使用函数柯里化的方式写事件处理(onChange)：

<!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="form"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        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 type="text" onChange={event => this.saveFormData('username', event)} name="username" />
                        <input type="password" onChange={event => this.saveFormData('password', event)} name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.querySelector('#form'))
    </script>
</body>

</html>

在这里插入图片描述

以上就是React 中事件处理的内容，请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。

@Dai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值