This commit is contained in:
2022-01-10 00:07:02 +08:00
parent 8f3c47ccce
commit 3a764e1f5e
9 changed files with 338 additions and 9 deletions
+6 -8
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-05 22:48:03
* @LastEditTime: 2022-01-05 23:39:32
* @LastEditTime: 2022-01-08 19:11:19
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -10,7 +10,7 @@
<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>
<title>非柯里化</title>
</head>
<body>
<div id="app"></div>
@@ -19,16 +19,14 @@
<script src="../package/old/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
saveData=(dataType)=>{
return(e)=>{
this.setState({[dataType]:e.target.value})
}
saveData=(dataType,value)=>{
this.setState({[dataType]:value})
}
render(){
return (
<div>
<input type="text" onChange={this.saveData('userName')} />
<input type="text" onChange={this.saveData('passworld')} />
<input type="text" onChange={(event)=>{this.saveData('userName',event.target.value)}} />
<input type="text" onChange={(event)=>{this.saveData('passworld',event.target.value)}} />
</div>
)
}
+41
View File
@@ -0,0 +1,41 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-08 18:50:31
* @LastEditTime: 2022-01-08 18:50:31
* @LastEditors: chenxuan
-->
<!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="app"></div>
<script src="../package/old/react.development.js"></script>
<script src="../package/old/react-dom.development.js"></script>
<script src="../package/old/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
saveData=(dataType)=>{
return(e)=>{
this.setState({[dataType]:e.target.value})
}
}
render(){
return (
<div>
<input type="text" onChange={this.saveData('userName')} />
<input type="text" onChange={this.saveData('passworld')} />
</div>
)
}
}
ReactDOM.render(
<Demo/>,document.getElementById('app')
)
</script>
</body>
</html>
+6 -1
View File
@@ -1 +1,6 @@
1、高阶组件
1、高阶组件
函数作为参数
返回值是一个函数
2、函数柯里化
通过函数调用,继续返回函数的方式,实现多次接收参数,最后统一处理的函数编码方式