- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
收集表单数据
非受控组件
现用现取
<!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">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Mycomponent extends React.Component{
handleSubmit=(event)=>{
event.preventDefault();
const {username,password}=this;
alert(`你输入的用户名是${username.value},密码是${password.value}`)
}
render(){
return(
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名:<input type="text" name="username" ref={c=>this.username=c}/>
密码:<input type="password" name="password" ref={c=>this.password=c}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Mycomponent />,document.getElementById('root'));
</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">
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Mycomponent extends React.Component{
//表单提交的回调
handleSubmit=(event)=>{
event.preventDefault();
const {username,password}=this.state;
alert(`您输入的用户名是${username},密码是${password}`)
}
//初始化状态
state={
username:'',
password:'',
}
//保存用户名到状态中
saveUsername=(event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword=(event)=>{
this.setState({password:event.target.value})
}
render(){
return(
<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
用户名:<input type="text" name="username" onChange={this.saveUsername}/>
密码:<input type="password" name="password" onChange={this.savePassword}/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Mycomponent />,document.getElementById('root'));
</script>
</body>
</html>