React之非受控组件和受控组件 - ellaha

一，非受控组件

表单中的数据在需要的时候“现用现取”（通过ref获得到节点，进而访问到value）

受控指的是受到状态state的控制
使用ref属性

<body>
    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                    <form onSubmit = {this.handleLogin}>
                        姓名:<input type='text' ref={curNode => this.userNameNode = curNode}/>
                        密码：<input type='password' ref = {curNode => this.passwordNode = curNode}/>
                        <button>提交</button>
                    </form>
                )
            }
            handleLogin = event=>{
                event.preventDefault()
                console.log(this)
                const {userNameNode, passwordNode} = this
                alert(`姓名为${userNameNode.value},密码为${passwordNode.value}`)
            }
        }
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>
</body>
</html>

二，受控组件

表单中输入类DOM（input checkbox select等）随着用户的输入，将值收集到state中，那么就成为受控组件

给A元素绑定事件，拿的是A元素

<body>
    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            state = {
                userName: '',
                password: ''
            }
            render(){
                return (
                    <form onSubmit = {this.handleLogin}>
                        姓名:<input type='text' onChange={this.saveUserName} />
                        密码：<input type='password' onChange={this.savePassword} />
                        <button>提交</button>
                    </form>
                )
            }
            // 保存用户名到state中
            saveUserName = event=>{
                this.setState({userName: event.target.value})
            }
            // 保存密码到state中
            savePassword = event=>{
                this.setState({password: event.target.value})
            }
            handleLogin = event=>{
                event.preventDefault()
                console.log(this)
                const {userName, password} = this.state
                alert(`姓名为${userName},密码为${password}`)
            }
        }
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>
</body>

三，小知识点

onChange方法监控input输入框改变

event.target是发生事件的事件源，每次在输入框中输入内容，就会获取到事件源

什么时候不使用ref？

发生事件的事件源和获取事件是同一个，使用event.target可以获取到元素上的属性，此时不使用ref（比如给A绑定事件，恰巧拿的是A元素上的属性）

当给按钮B绑定事件，获取输入框A中的属性，此时需要借助ref实现

<div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            render(){
                return (
                    <form onSubmit = {this.handleLogin}>
                        姓名:<input type='text' onChange={this.demo} />
                        密码：<input type='password' />
                        <button>提交</button>
                    </form>
                )
            }
            demo(event){
                console.log(event.target)
            }
            handleLogin = event=>{
                event.preventDefault()
                console.log(this)
                
            }
        }
        ReactDOM.render(<Demo/>, document.getElementById('test'))

posted on 2022-01-16 21:28 ellaha 阅读(55) 评论(0) 收藏举报

刷新页面返回顶部