React之事件处理之受控组件和非受控组件以及函数柯里化
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.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 ref=c => this.username = c type="text" name="username"/>
密码<input ref=c => this.password = c type="password" name="password"/>
<button>登录</button>
</form>
)
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>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化state
username:"",
password:""
//保存用户名到状态中
saveUsername = (event) =>
// console.log(event.target.value)
this.setState(username:event.target.value)
//保存密码到状态中
savePassword = (event) =>
// console.log(event.target.value)
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 onChange=this.saveUsername type="text" name="username"/>
密码<input onChange=this.savePassword type="password" name="password"/>
<button>登录</button>
</form>
)
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>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化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 onChange=this.saveFormData("username") type="text" name="username"/>
密码<input onChange=this.saveFormData("password") type="password" name="password"/>
<button>登录</button>
</form>
)
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>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
//创建组件
class Login extends React.Component
state = //初始化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 onChange=(event)=>this.saveFormData("username", event) type="text" name="username"/>
密码<input onChange=(event)=>this.saveFormData("password", event) type="password" name="password"/>
<button>登录</button>
</form>
)
ReactDOM.render(<Login/>, document.getElementById("test"))
</script>
</body>
</html>
以上是关于React之事件处理之受控组件和非受控组件以及函数柯里化的主要内容，如果未能解决你的问题，请参考以下文章