React 受控和非受控组件

这篇具有很好参考价值的文章主要介绍了React 受控和非受控组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

无论你做什么,都要相信自己可以做到,因为你的潜力是无限的。

把父组件的状态变成属性传递给子组件,子组件接受这个属性,听命于父组件。这个子组件就是叫做受控组件。在受控与非受控组件有两种理解方案,第一:狭义上的受控与非受控,就是我们在表单中的受控与非受控组件。第二:广义上的受控与非受控组件,就是 React 组件的数据渲染是通过父组件传递过来的属性控制的,能完全控制得住的就是受控组件,不能完全控制住的就是非受控组件。

1. 表单中非受控组件

React 要编写一个表单非受控组件,可以使用 ref 来从 DOM 节点中获取表单数据(访问节点,通过节点访问值),与状态没有任何关系,这种就是非受控组件。 下面代码使用非受控组件接受一个表单的值:

import React, { Component } from 'react'

export default class App extends Component {
  myusername = React.createRef()
  render() {
    return (
      <div>
        <h4>登录页</h4>
        {/* 这里设置 value 后导致 input 不能输入了。写成 value 形式本身就是一种受控方式。被字符串 “hubert” 控制住了。*/}
        <input type={"text"} ref={this.myusername} value="hubert"></input>
        {/* 非受控需要通过 defaultValue 设置默认值,只是第一次设置值 */}
        <input type={"text"} ref={this.myusername} defaultValue="hubert"></input>
        <button onClick={()=>{
          console.log(this.myusername.current.value)
        }}>登录</button>
        <button onClick={()=>{
          this.myusername.current.value = ""
        }}>重置</button>
      </div>
    )
  }
}

因为非受控组件将真实数据储存在 DOM 节点中,所以在使用非受控组件时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。

默认值问题:在React 渲染生命周期时,表单元素上的 value 将会覆盖 DOM 节点中的值,在非受控组件中,你经常希望 React 能赋予组件一个初始值,但是不去控制后续的更新。在这种情况下,你可以指定一个 defaultvalue 属性,而不是 value。

2. 表单中受控组件

现在如果有一个子组件需要拿到表单中的 value 值,该怎么办?这里在输入框值变更的时候,是不会同步、分享到子组件的,因为 render 函数是不会重新执行的。

在 HTML 中,表单元素(如 <input><select>)通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState() 来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做"受控组件”。文章来源地址https://www.toymoban.com/news/detail-747478.html

 {/* 在输入框值变更的时候,是不会同步、分享到子组件的 */}
 <Child value={this.myusername.current.value}></Child>

// 设置成受控组件后后
<Child value={this.state.username}></Child>
import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: "hubert"
  }
  render() {
    return (
      <div>
        <h4>登录页</h4>
        {/* 这里设置 value 后导致 input 不能输入了。写成 value 形式本身就是一种受控方式。被字符串 “hubert” 控制住了。*/}
        {/* 非受控需要通过 defaultValue 设置默认值,只是第一次设置值 */}
        <input type={"text"} ref={this.myusername} value={this.state.username} onChange={(evt)=>{
          this.setState({
            username: evt.target.value
          })
        }}></input>
        <button onClick={()=>{
          console.log(this.state.username)
        }}>登录</button>
        <button onClick={()=>{
          this.setState({
            username:""
          })
        }}>重置</button>
        {/* 在输入框值变更的时候,是不会同步、分享到子组件的 */}
        {/* <Child value={this.myusername.current.value}></Child> */}
      </div>
    )
  }
}

// 在 react 中 onInput 和 onChange 事件的行为一样的。原生 JS 则不然。

到了这里,关于React 受控和非受控组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 中的受控组件

    React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制,更新时会通过回调函数进行数据的处理。 受控组件的特点包括: 值由状态控制:受控组件的值是通过 React 组件的状态进行控制和更新的。 通过事件处理器更新值:受控组件通常配合

    2024年02月15日
    浏览(198)
  • 初识React/JSX/组件/state/受控组件

                                               

    2024年02月12日
    浏览(60)
  • React之组件的分类、使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件

    组件是 React 开发(现代前端开发)中最重要的内容 组件允许你将 UI 拆分为独立、可复用的部分,每个部分都可以独立的思考 组合多个组件(组装乐高积木)实现完整的页面功能 特点:独立、可复用、可组合 组件包含三部分:HTML/CSS/JS 展示页面中的可复用部分 函数组件:使

    2024年02月16日
    浏览(45)
  • 深入探讨React受控组件的表单处理

    React中的受控组件是一种通过React状态管理表单元素值的方式。在这篇博客中,我们将深入探讨受控组件的使用,通过一个登录表单实例,了解其优势、实现方式以及在实际项目中的应用。 在React中,受控组件是由React状态管理表单元素值的一种形式。通过React的状态(state)来

    2024年01月25日
    浏览(55)
  • 封装vue2局部组件都要注意什么

    template  =  组件的模板结构  (必选) 每个组件对应的模板结构,需要定义到template节点中 template中使用的指令 template定义根节点 注:vue 2.x版本中,template节点内dom结构仅支持单个根节点;但在vue 3.x版本中,支持多个根节点 script  =  组件的javascript行为  (可选) script中的

    2024年02月13日
    浏览(50)
  • Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓,当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况,无论里面是什么 HTML 元素和组件都会由此问题(完美解决方案)

    在 Element Plus 组件库中,使用 dropdown 下拉菜单时鼠标点击或移入时周围出现黑色边框问题。 本文 实现了 vue3+element plus 项目开发中,隐藏下拉菜单 el-dropdown-menu / el-dropdown-item 周围的边框, 如下图所示,当鼠标移入(hover)和点击时就会围绕一圈黑色边框,但通过本文的方案

    2024年02月09日
    浏览(93)
  • React中的组件的渲染函数(Render Function)是什么?什么是React中的函数组件和类组件?如何在React中进行状态管理?

    React中的组件可以有多种形式的渲染函数,包括传统的render()方法,以及近年来兴起的函数组件和Hooks中的useState()和useEffect()。在这篇文章中,我将详细介绍渲染函数,以及如何在React中使用它们。 渲染函数(Render Function)是指组件在生命周期中的一个特殊方法,它的作用是根据

    2024年02月13日
    浏览(41)
  • React 组件化是什么?

    React 是一个用于构建用户界面的JavaScript库,它采用了组件化的开发模式,使得开发者可以将界面划分为独立的、可重用的组件,以便更轻松地管理和维护复杂的应用程序。 组件化开发是一种将应用程序拆分为小块、可重用的部分的方法。 在React中,每个组件都有自己的状态

    2024年02月10日
    浏览(63)
  • 说说对React中类组件和函数组件的理解?有什么区别?

    通过ES6类的编写形式去编写组件,该类必须继承React.Component,通过this.props的方式去访问父组件传递过来的参数,且在类组件中必须使用render方法,在return中返回React对象,如下: 通过函数编写的形式去实现一个React组件,是React中定义组件最简单的方式,如下: 1.编写形式不

    2024年01月22日
    浏览(49)
  • 请简述React是什么?React的主要特点有哪些?React中有哪些主要组件?

    React是一个用于构建用户界面的JavaScript库,它由Facebook开发并开源。React的主要特点是其数据驱动和组件化的设计理念。它允许开发者将复杂的界面分解为简单的组件,并将这些组件以数据流的方式组合在一起,使得组件的状态和行为可以根据数据的变化而自动更新。React还提

    2024年02月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包