首页 > 其他分享 >React 受控组件和非受控组件

React 受控组件和非受控组件

时间:2022-09-23 10:58:08浏览次数:56  
标签:受控 username 表单 React 组件 password event

受控组件

在HTML中,表单元素的标签<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。

而在React中,这些输入表单元素的值,应该保存在state中,并且只能由setState()进行更新。比如给表单元素绑定onChange事件,当input状态发生改变的时候,就会触发onChange事件,从而更新组件的state。

React中推荐使用受控组件,因为可以减少使用ref,受控组件可以理解为Vue中的数据双向绑定,只不过React没有替我们实现,需要自己绑定 onChange

class Login extends React.Component {
    // 初始化状态
    state = {username: '', password: ''}

    saveUsername = (event) => {
        this.setState({username: event.target.value})
    }

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

    handleSubmit = (event) => {
        // 阻止表单提交的默认事件
        event.preventDefault()
        const {username, password} = this.state
        alert('你输入的用户名是:' + username + ',你输入的密码是:' + password)
    }

    render() {
        return (
            <form action="xxx" onSubmit={this.handleSubmit}>
                用户名:<input onChange={this.saveUsername} type="text" name="username"/>
                密码:<input onChange={this.savePassword} type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}

ReactDOM.render(<Login/>, document.getElementById('test1'));

非受控组件

非受控组件指的是,表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。

在非受控组件中,可以使用一个ref来从真实DOM获得表单元素的值。

class Login extends React.Component {
    handleSubmit = (event) => {
        // 阻止表单提交的默认事件
        event.preventDefault()
        const {username, password} = this
        alert('你输入的用户名是:' + username.value + ',你输入的密码是:' + password.value)
    }

    render() {
        return (
            <form action="xxx" onSubmit={this.handleSubmit}>
                用户名:<input ref={c => this.username = c} type="text" name="username"/>
                密码:<input ref={c => this.password = c} type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}

ReactDOM.render(<Login/>, document.getElementById('test1'));

总结

  • 共同点,都是指表单元素,或者表单组件。
  • 不同点,被react的state控制,就是受控组件。不会state控制,就是非受控组件。
  • 受控组件的实现方式,就是设置state,调用setstate来更新数据和视图。
  • 非受控组件使用ref等方式,更新数据和视图。

标签:受控,username,表单,React,组件,password,event
From: https://www.cnblogs.com/luckest/p/16721903.html

相关文章

  • vue学习笔记(五):组件的重用
    父组件代码:放在views文件夹中<template><div><h1>父组件</h1><!--指定type和size,传值给组件--><mybuttontype="fail"size="middle">按......
  • react-native 实现环形(圆形)进度条
    废话不多说,直接上硬货:效果图   安装 react-native-anchor-point用于处理旋转中心点位置yarnaddreact-native-anchor-pointgithub仓库地址: https://github......
  • rxjs 在 react 下的应用
    设置一个subject,然后在组件内定义一个subscription想要发送事件就用subject.next订阅就赋值subject.asObservable().subscribe()直接看代码constsubject=ne......
  • 快速上手React编程 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1R4B-izNpESydo-yFNmU8xw点击这里获取提取码 ......
  • Vue 的父组件和子组件生命周期钩子函数执行顺序?
    Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子crea......
  • vue组件系列-列表左右箭头滚动(vue3+ts)
    <template><divclass="list-wrapper"ref="allListRef"><divv-if="showArrow&&listSource.length>minArrowItemsCount"@click="scrollLeft"......
  • 自定义组件中使用half-screen-dailog 无法舒勇外部样式
     为了将弹窗更方便的调用,封装了组件,但是发现一个问题,外部样式类在组件中是无法正常使用的。 也就说在组件的wxss中是无法正常使用.weui-half-screen-dialog这个外部......
  • vue3+jsx做函数组件
    组件部分:import{h}from"vue";constTest1=(props,context)=>{//context.slots类似react的props.children,但是这里代表插槽,ccname是具名插槽的名字,没有......
  • 教你如何实现react Scheduler(二)
    在上一篇文章中“反应调度程序(1)”中,我们使用MessageChannel来实现一个简单的任务调度功能。但是这个功能目前还是比较简单的,现在我们来改进一下,给任务增加优先级和过期......
  • 使用 PNPM 将 React App 中的磁盘空间减少 60%
    使用PNPM将ReactApp中的磁盘空间减少60%在React应用程序中使用PNPM减少磁盘空间的教程。Photoby诺德伍德主题on不飞溅您是否正在处理具有共同依赖项的......