非受控组件
<!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>test</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Login extends React.Component {
handleSubmit = () => {
event.preventDefault();
const username = this.usernameEle.value;
const password = this.passwordEle.value;
alert(`用户名:${username},密码:${password}`);
}
render(){
const {handleSubmit} = this;
return (
<form onSubmit={handleSubmit}>
用户名:<input type="text" name="username" ref={c => this.usernameEle = c}/>
密码:<input type="password" name="password" ref={c => this.passwordEle = c}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById("app"));
</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>test</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Login extends React.Component {
state = {
username:"",
password:""
}
handleSubmit = () => {
event.preventDefault();
const {username,password} = this.state;
alert(`用户名:${username},密码:${password}`);
}
changeUsername = (event) => {
this.setState({
username:event.target.value
})
}
changePassword = (event) => {
this.setState({
password:event.target.value
})
}
render(){
const {username,password} = this.state;
const {handleSubmit,changeUsername,changePassword} = this;
return (
<form onSubmit={handleSubmit}>
用户名:<input type="text" name="username" value={username} onChange={changeUsername}/>
密码:<input type="password" name="password" value={password} onChange={changePassword}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById("app"));
</script>
</body>
</html>
使用柯里化函数优化代码
- 高阶函数。
函数funcA接收的参数是一个函数,则函数funcA是一个高阶函数。如setTimeout
、Promise
、Array.prototype.map
,它们都是高阶函数。
函数funcB的返回值是一个函数,则函数funcB也是一个高阶函数。 - 柯里化函数。
柯里化函数是一个高阶函数,柯里化函数的返回值是一个函数。
通过调用函数返回函数,实现多次接收参数最后统一处理的编码方式,就是柯里化。
在受控组件中,changeUsername
、changePassword
,这两个方法几乎完全一样,不同的是,一个修改的是username
,一个修改的是password
。
现在,用一个柯里化函数来替代这两个方法,对代码进行优化。
<!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>test</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Login extends React.Component {
state = {
username:"",
password:""
}
handleSubmit = () => {
event.preventDefault();
const {username,password} = this.state;
alert(`用户名:${username},密码:${password}`);
}
changeFormData = (dataType) => {
return (event) => {
this.setState({
[dataType]:event.target.value
})
}
}
render(){
const {username,password} = this.state;
const {handleSubmit,changeFormData} = this;
return (
<form onSubmit={handleSubmit}>
用户名:<input type="text" name="username" value={username} onChange={changeFormData("username")}/>
密码:<input type="password" name="password" value={password} onChange={changeFormData("password")}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById("app"));
</script>
</body>
</html>
通过事件传参来优化代码
react事件是自定义合成事件,不是原生DOM事件。
react事件通过事件委托的方式进行处理,委托给组件最外层的元素进行处理。
<!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>test</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Login extends React.Component {
state = {
username:"",
password:""
}
handleSubmit = () => {
event.preventDefault();
const {username,password} = this.state;
alert(`用户名:${username},密码:${password}`);
}
changeFormData = (dataType,event) => {
this.setState({
[dataType]:event.target.value
})
}
render(){
const {username,password} = this.state;
const {handleSubmit,changeFormData} = this;
return (
<form onSubmit={handleSubmit}>
用户名:<input type="text" name="username" value={username} onChange={event => changeFormData("username",event)}/>
密码:<input type="password" name="password" value={password} onChange={event => changeFormData("password",event)}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login />, document.getElementById("app"));
</script>
</body>
</html>