[react] react中什么是受控组件?
表单元素的value
/checked
值与state绑定,同时表单元素的onChange可以动态的改变对应的state的值,即数据的变更可以更新视图,用户操作视图的更新也可以触发state数据的更新.
import React from 'react';
class FormDemo extends React.Component {
state = {
username: '',
password: ''
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
[name]: value,
});
}
onSubmit = () => {
const { username, password } = this.state;
console.log({
username,
password,
})
}
render () {
const { username, password } = this.state;
return (
<div className="form">
<p>
<span>用户名:</span>
<input value={username} name="username" onChange={this.handleChange} />
</p>
<p>
<span>密码:</span>
<input value={password} name="password" onChange={this.handleChange} />
</p>
<button onClick={this.onSubmit}>登录</button>
</div>
)
}
}
export default FormDemo;
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。