10-非受控组件=>表单数据将交由 DOM 节点来处理
<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--refs</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="./react_js/react.development.js"></script>
<script type="text/javascript" src="./react_js/react-dom.development.js"></script>
<script type="text/javascript" src="./react_js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
render(){
return (
<form action="https://baidu.com" onSubmit={this.handleLogin}>
用户名: <input ref={c=>this.username=c} type="text" name='username'/>
密码: <input ref={c=>this.password=c} type="password" name='password'/>
<button>登录</button>
</form>
)
}
handleLogin=(event)=>{
event.preventDefault();
const {username,password} = this
alert(`你输入的用户名是${username.value},密码为${password.value}`);
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
11-受控组件=>表单数据是由 React 组件来管理(state管理数据)=>类似Vue的双向数据绑定
<!DOCTYPE html>
<html lang="zh-CN">
<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>组件实例三大属性--refs</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="./react_js/react.development.js"></script>
<script type="text/javascript" src="./react_js/react-dom.development.js"></script>
<script type="text/javascript" src="./react_js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
state={
username:'',
password:''
}
render(){
return (
<form action="https://baidu.com" onSubmit={this.handleLogin}>
用户名: <input onChange={this.saveUsername} type="text" name='username'/>
密码: <input onChange={this.savePassword} type="password" name='password'/>
<button>登录</button>
</form>
)
}
handleLogin=(event)=>{
event.preventDefault();
const {username,password} = this.state
alert(`你输入的用户名是${username},密码为${password}`);
}
saveUsername=(event)=>{
this.setState({username:event.target.value})
}
savePassword=(event)=>{
this.setState({password:event.target.value})
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>