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 中的标签事件接收的是一个函数，定义的事件函数可以以高阶函数和柯里化的方式实现。
扫描二维码关注公众号，回复： 13738858 查看本文章
使用函数柯里化的方式写事件处理(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与大家分享，一起进步，加油。