一、非受控组件：现用现取
用一个案例来展开：
要实现下图这样的一个功能：输入用户名，密码，点击登录
?
弹出输入的账号和密码值：
?
代码实现：
<body>
<div id="root"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component {
login = (event) => {
event.preventDefault()//阻止表单默认行为--跳转
const { username, password } = this
alert(`账号为${username.value}, 密码为${password.value}`)
}
render() {
return (
<form action="http://www.baidu.com" onSubmit={this.login}>
{/*表单内所有输入类dom的值，（多选、单选也算）现用现取，就是非受控组件*/}
用户名：<input ref={c => this.username = c} type="text" name="username" />
{/*现用现取:点击登录才提交表单，调用onsubmit方法，获取表单数据*/}
密 码：<input ref={c => this.password = c} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('root'))
</body>
</html>二、非受控组件
同样的需求，代码实现：
<script type="text/babel">
class Login extends React.Component {
// 3.初始化状态
state = { username: '', password: '' }
saveUsername = (event) => {
this.setState({username:event.target.value}) //2.把它的值给状态
}
savePassword = () => {
this.setState({password:event.target.value}) //2.把它的值给状态
}
login = (event) => {
event.preventDefault()//阻止表单默认行为--跳转
// 4.从state里取值
const { username, password } = this.state
alert(`账号为${username}, 密码为${password}`)
}
// 受控组件优势：能够省略掉ref
render() {
return (
<form action="" onSubmit={this.login}>
{/*1.onchange事件：当发生改变时就拿到它的值，类似vue里的双向绑定*/}
用户名：<input onChange={this.saveUsername} type="text" name="username" />
密 码：<input onChange={this.savePassword} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('root'))
</script>三、高阶函数_柯里化
高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
? ? ? ? ? ? ? ? 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
? ? ? ? ? ? ? ? 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
? ? ? ? ? ? ? ? 常见的高阶函数有:Promise、setTimeout、arr.map()
函数的柯里化:
通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
<script>
function sum(a, b, c) {
return (a + b + c)
}
console.log(sum(1,2,3))
// 函数的柯里化
function sum1(a){
return (b)=>{
return (c)=>{
return a+b+c
}
}
}
console.log(sum1(1)(2)(3));
</script>代码实现：
<script type="text/babel">
// #region #endregion 让代码折叠起来的
// #region
/*
高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有:Promise、setTimeout、arr.map()
函数的柯里化:通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
*/
// #endregion
class Login extends React.Component {
// 3.初始化状态
state = { username: '', password: '' }
// 这个位置传的参数就是表单数据类别，比如用户名，密码，id，手机号...
// 4.自定义一个名字传进去 dateType
saveFormDate = (dateType) => { //saveFormDate就是高阶函数
// 5.想办法传给一个函数作为onchange事件的回调 return一个函数
return (event) => {
// {} 在对象里取值用[]
// 相当于 this.setState({username:event.target.value})
// 相当于 this.setState({password:event.target.value})
// ...
this.setState({ [dateType]: event.target.value })//6.把它的值给状态
}
}
login = (event) => {
event.preventDefault()//阻止表单默认行为--跳转
//
从state里取值
const { username, password } = this.state
alert(`账号为${username}, 密码为${password}`)
}
// 受控组件优势：能够省略掉ref
render() {
return (
<form action="" onSubmit={this.login}>
{/*1.onChange={this.saveFormDate('username')} 自己写的以参数形式区分传的什么*/}
{/*2.onChange={this.saveFormDate()} 加()是错的*/}
{/*3.onChange={this.saveFormDate} 要传一个函数作为onchange事件的回调，react才帮你调用*/}
用户名：<input onChange={this.saveFormDate('username')} type="text" name="username" />
密 码：<input onChange={this.saveFormDate('password')} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById('root'))
</script>
