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

文章目录

【React】第四部分非受控组件和受控组件
4. 非受控组件和受控组件
- 非受控组件
- 受控组件
总结

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'))