1.代码
<body>
<div id="test"></div>
<script type="text/babel">
"use strict";
class Login extends React.Component {
state = {
username: "",
password: "",
};
saveFormData = (dataType,value) => {
this.setState({
[dataType]:value})
};
handleSubmit = (event) => {
event.preventDefault();
const {
username, password } = this.state;
alert(`你输入的用户名是：${
username}，你输入的密码是：${
password
};
render() {
return (
<form action="https://www.baidu.com" onSubmit={
this.handleSubm
用户名：
<input
onChange={
(event)=>{
this.saveFormData('username',event.tar
type="text"
name="username"
/>
密码：
<input
onChange={
(event)=>{
this.saveFormData('password',event.tar
type="password"
name="password"
/>
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login />, document.getElementById("test"));
</script>
</body>
2.代码讲解
- 总之onChange需要接收一个函数，然后这个函数可以才可以使用event参数
用户名：
<input
onChange={
(event) => {
this.saveFormData("username", event);
}}
type="text"
name="username"
/>
密码：
<input
onChange={
(event) => this.saveFormData("password", event)}
type="password"
name="password"
/>
- 方法简化处理
3.运行结果
