[react] react中什么是受控组件?
2021/11/24 23:15:03
本文主要是介绍[react] react中什么是受控组件?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
[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;
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
这篇关于[react] react中什么是受控组件?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践