【React】第四部分非受控组件和受控组件

Tree_wws

已于 2022-08-12 12:27:34 修改

阅读量110

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端框架React 文章标签： react.js javascript 前端

于 2022-08-04 14:58:46 首次发布

本文链接：https://blog.youkuaiyun.com/Trees__/article/details/126159638

前端框架React 专栏收录该内容

15 篇文章

订阅专栏

本文详细讲解了React中非受控组件与受控组件的区别：非受控组件直接操作DOM，而受控组件通过状态管理输入变化。建议使用受控组件以提升代码可维护性和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【React】第四部分非受控组件和受控组件

4. 非受控组件和受控组件

非受控组件

简单来说就是对于输入类的DOM现用现取就叫做非受控组件

 class Demo extends React.Component{
            render(){
                return (
                    <form onSubmit ={this.handleForm}>
                        用户名 : <input ref={c => this.userName = c} type="text" /><br/>
                        密码 : <input ref={c => this.password = c} type="password" /><br/>
                        <button>登录</button>
                    </form>
                )
            }

            handleForm = () =>{
                const {userName,password} = this
                alert(`用户名: ${userName.value} -- 密码: ${password.value}`)
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('box'))

受控组件

对于输入类的DOM随着输入发生变化不断维护到状态里,需要用的时候在从状态中取出来

 // 受控组件
        class Demo extends React.Component{
            render(){
                return (
                    <form onSubmit ={this.handleForm}>
                        用户名 : <input onChange = {this.saveUserName} type="text" /><br/>
                        密码 : <input onChange = {this.savePassword} type="password" /><br/>
                        <button>登录</button>
                    </form>
                )
            }

            // 初始化state
            state = {
                userName : '',
                password : ''
            }

            saveUserName = (e) =>{
                this.setState({userName:e.target.value})
            }

            savePassword = (e) =>{
                this.setState({password:e.target.value})
            }


            handleForm = () =>{
                const {userName,password} = this.state
                alert(`用户名: ${userName} -- 密码: ${password}`)
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('box'))