<script type="text/babel">
// 创建组件
class Login extends React.Component {
// 初始化状态
state = {
username: "",
password: "",
};
// 复用
saveInfo = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
handleSumbit = (event) => {
event.preventDefault(); // 阻止表单提交
const { username, password } = this.state;
alert(`用户名:${username}, 密码是:${password}`);
};
render() {
return (
// onsubmit 当表单提交时调用的接口
<form action="#" onSubmit={this.handleSumbit}>
用户名:{" "}
{
// onChange 调用同一个方法 进行复用
}
<input onChange={this.saveInfo} type="text" name="userName" />
密码:{" "}
<input onChange={this.saveInfo} type="password" name="passWord" />
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Login />, document.getElementById("test"));
</script>
React中 数据赋值 改变复用方法
最新推荐文章于 2024-07-13 20:22:07 发布