标签：受控 username const value react state 组件 password

[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;

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

标签：受控,username,const,value,react,state,组件,password
来源： https://blog.csdn.net/weixin_43392489/article/details/121513511

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。